פיתוח חוצה-פלטפורמות בדגש על גרפיקה מתקדמת ו 3D – עמוד 2

למבוא – HTML5 למפתחי ActionScript3

בשיעור הזה נראה כיצד ליצור את הבמה ולהוסיף לה את האלמנט הגרפי הבסיסי ביותר ה Shape. נשתמש בפקודות ציור בסיסיות בכדי לצייר על ה Shape. בנוסף ניצור אנימציה בסיסית תוך שימוש בפונקציה onEnterFrame.

נסתכל על הדוגמא הבאה: לחץ כאן בכדי להריץ את הדוגמא

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ronen Tsamir: JavaScript AS3 Sample 1 </title>
<script type="text/javascript" src="DisplayObject/Shape.js"></script>
<script type="text/javascript" src="DisplayObject/Sprite.js"></script>
<script type="text/javascript" src="DisplayObject/ImageLoader.js"></script>
<script type="text/javascript" src="InitStage.js"></script>
</head>
<body>
<script type="text/javascript">
CreateStage(700,500,45);

var shape1 = new DisplayObject.Shape();
shape1.x = 100;
shape1.y = 200;
stage.addChild(shape1);
shape1.drawShape = function()
{
graphics.lineWidth=7;
graphics.lineJoin= "round";
graphics.beginPath();
graphics.rect(-10,-100,20,200)
graphics.stroke();
graphics.closePath();
}
function onEnterFrame()
{
shape1.x+=1;
if(shape1.x > mCanvas.width)
shape1.x = 1;
shape1.rotation+=0.005;
}
</script>
</body>
</html>

אם הצלחתי ביצירת הספרייה. אזי כל מפתח AS3, גם אם אינו מכיר JS, יכול להבין את הקוד הזה.
בכל זאת נראה מה היה לנו כאן:

קטע הקוד הבא טוען את קבצי הסיפריה.

ועכשיו לקוד עצמו:
השורה הבאה יוצרת את הבמה (Stage), למעשה יוצרת Canvas בגודל של 700 על 500 וקובעת מהירות ריפרוש של 45 פריימים לשנייה (FPS)

CreateStage(700,500,45);

בקטע הקוד הבא אנחנו יוצרים אובייקט מסוג Shape, קובעים לו מיקום של 100 על 200 ומוסיפים אותו לבמה.

var shape1 = new DisplayObject.Shape();
shape1.x = 100;
shape1.y = 200;
stage.addChild(shape1);

הפונקציה drawShape תיקרא למעשה בכל פעם שה Shape יצוייר למסך. כלומר זו פונקציה וירטואלית במחלקה Shape שכל מי אשר מממש Shape אמור לדרוס אותה. במקרה הנ"ל אנו מציירים מלבן. לא אכנס כאן לפקודות ציור עצמן, יש מספיק מקומות ברשת שמלמדות אותן.

shape1.drawShape = function()
{
graphics.lineWidth=7;
graphics.lineJoin= "round";
graphics.beginPath();
graphics.rect(-10,-100,20,200)
graphics.stroke();
graphics.closePath();
}

למעשה כל מה שנשאר זה להוסיף פונקציית onEnterFrame. בדוגמא הזו אני מסובב את הצורה ומזיז אותה על ציר ה X

function onEnterFrame()
{
shape1.x+=1;
if(shape1.x > mCanvas.width)
shape1.x = 1;
shape1.rotation+=0.005;
}

לשיעור הבא – שימוש ב Sprite

לשיעור הקודם – הכרת ה Stage ו ה Shape

בשיעור זה נילמד על ה Sprite. למעשה ה Sprite כפי שכבר ציינתי יורש מ Shape ומוסיף שתי פונקציות חשובות addChild ו removeChild. כלומר, על ה Sprite אפשר להוסיף אלמנטים גרפיים וכך לנהל היררכיה גרפית , בדומה לפלאש. למעשה ה stage הוא ה Sprite הראשון בהיררכיה.

נוסיף את הקוד הבא להדוגמא הקודמת: לחץ כאן להרצת הדוגמא.

var sprite1 = new DisplayObject.Sprite();
sprite1.x = 200;
sprite1.y = 200;
stage.addChild(sprite1);

למעשה הקוד הזה זהה ממש ל AS3. יצרנו Sprite והוספנו אותו לבמה במיקום 200 על 200
בקטע קוד הבא ניצור שני Shapes חדשים ונוסיף אותם ל Sprite במקומות שונים.
בשביל לחסוך יצרתי אותם כהעתק של shape1 מהדוגמא הקודמת:

var shape2 = shape1.clone();
shape2.y = 0;
shape2.x = -50;
sprite1.addChild(shape2);

var shape3 = shape1.clone();
shape3.y = 0;
shape3.x = 50;
sprite1.addChild(shape3);

עכשיו, בשביל להדגיש את ההררכיה, נסובב את ה Sprite בלולאת ה onEnterFrame וניראה שבעצם 2 הצורות שהוספנו עליו מסתובבות.
אז נוסיף את השורה הבאה לפונקציה onEnterFrame

sprite1.rotation+=0.05;

לסיום השעור, הקוד כולו:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ronen Tsamir: JavaScript AS3 Sample 1 </title>
<script type="text/javascript" src="DisplayObject/Shape.js"></script>
<script type="text/javascript" src="DisplayObject/Sprite.js"></script>
<script type="text/javascript" src="DisplayObject/ImageLoader.js"></script>
<script type="text/javascript" src="InitStage.js"></script>
</head>
<body>
<script type="text/javascript">
CreateStage(700,500,45);

var shape1 = new DisplayObject.Shape();
shape1.x = 100;
shape1.y = 200;
stage.addChild(shape1);
shape1.drawShape = function()
{
graphics.lineWidth=7;
graphics.lineJoin= "round";
graphics.beginPath();
graphics.rect(-10,-100,20,200)
graphics.stroke();
graphics.closePath();
}

var sprite1 = new DisplayObject.Sprite();
sprite1.x = 200;
sprite1.y = 200;
stage.addChild(sprite1);

var shape2 = shape1.clone();
shape2.y = 0;
shape2.x = -50;
sprite1.addChild(shape2);

var shape3 = shape1.clone();
shape3.y = 0;
shape3.x = 50;
sprite1.addChild(shape3);

function onEnterFrame()
{
shape1.x+=1;
if(shape1.x > mCanvas.width)
shape1.x = 1;
shape1.rotation+=0.005;
sprite1.rotation+=0.05;
}
</script>
</body>
</html>

לשיעור הבא – אנימציה ותמונות בעזרת ImageLoader