שימוש ב Sprite

Posted by on

לשיעור הקודם – הכרת ה 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;

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

<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>

<script type="text/javascript"><br />
    CreateStage(700,500,45);</p>
<p>    var shape1 = new DisplayObject.Shape();<br />
    shape1.x = 100;<br />
    shape1.y = 200;<br />
    stage.addChild(shape1);<br />
    shape1.drawShape = function()<br />
    {<br />
        graphics.lineWidth=7;<br />
        graphics.lineJoin= "round";<br />
        graphics.beginPath();<br />
        graphics.rect(-10,-100,20,200)<br />
        graphics.stroke();<br />
        graphics.closePath();<br />
    }</p>
<p>    var sprite1 = new DisplayObject.Sprite();<br />
    sprite1.x = 200;<br />
    sprite1.y = 200;<br />
    stage.addChild(sprite1);</p>
<p>    var shape2 = shape1.clone();<br />
    shape2.y = 0;<br />
    shape2.x = -50;<br />
    sprite1.addChild(shape2);</p>
<p>    var shape3 = shape1.clone();<br />
    shape3.y = 0;<br />
    shape3.x = 50;<br />
    sprite1.addChild(shape3);</p>
<p>   function onEnterFrame()<br />
   {<br />
       shape1.x+=1;<br />
       if(shape1.x > mCanvas.width)<br />
           shape1.x = 1;<br />
       shape1.rotation+=0.005;<br />
       sprite1.rotation+=0.05;<br />
   }<br />
</script>

כתיבת תגובה

האימייל לא יוצג באתר.