بازی ساز phaser

saalek110 · Mar 6, 2024

صفحه ۳:

آنچه گذشت:
در صفحه ۲ تاپیک فهمیدیم چطور به فایل phaser لینک بدهیم.
و طرز لینک دادن به فایل وقتی خودمون فایل را آپلود کردیم را هم دیدیم.

همچنین در صفحه دوم دیدید که میشه کدهای جاوا اسکریپت را در فایل جدایی گذاشت یا داخل همون فایل اصلی گذاشت.

و دیدیم که در تابع preload عکسهارا چسباندیم به اسم اسپریت ها...
و در تابع create اسپریت ها را به بازی اضافه کردیم.

saalek110 · Mar 6, 2024

نشان ندادن فایل html:

خوب فکر کنم بهتره ما هم فایل html را دیگه نشون ندهیم و فقط فایل js را نشان بدهیم.
در صفحه دوم تاپیک شما دیدید که نقش فایل html چی بود ، دیگه لزومی ندارد یک کد تکراری را با خودمان دائم یدک بکشیم.
پس اگر فقط فایل با پسوند js گذاشتیم ، یعنی اون فایل توسط یک فایل با پسوند html صدا زده شده.
ادیت بعدا: در دو پست بعد ، در مورد مشکل کچ cache گفتم. بنابراین در پست بعدی ، کدهای جاوا اسکریپت را باز وسط کدهای html گذاشتم بمونه.

saalek110 · Mar 6, 2024

JavaScript:

<!DOCTYPE html>
<html>
<head>

    <script src="phaser/phaser.min.js"></script>

</head>
<body>
<script>
  class Example extends Phaser.Scene
  {
      constructor ()
          {
 super();
   }

 preload ()
 {
 this.load.image('ayu', 'assets/pics/aya_touhou_teng_soldier.png');
             }
 create ()
              {
 //  When creating images they are added in display order.
//  The first one created appears at the back of the display list, and so on.
//  By default that have a depth value of 0 which means "unsorted"
//  Click to change the depth of image3 to 1, raising it higher than the others.

const image1 = this.add.image(100, 300, 'ayu');      
const image2 = this.add.image(200, 300, 'ayu');
const image3 = this.add.image(300, 300, 'ayu');
const image4 = this.add.image(400, 300, 'ayu');
const image5 = this.add.image(500, 300, 'ayu');
const image6 = this.add.image(600, 300, 'ayu');
const image7 = this.add.image(700, 300, 'ayu');
 this.input.on(Phaser.Input.Events.POINTER_DOWN, function (pointer) {
image3.setDepth(1);
         }, this);
 
     }//function
        }  // class

    const config = {
     type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
     parent: 'phaser-example',
     scene: Example
     };
const game = new Phaser.Game(config);

</script>
</body>
</html>

http://saalek121.fast-page.org/test/phaser/a5.html?i=1

در برنانه فوق با تاچ ، عکس شماره ۳ می آید بالا.

تفاوت اسپریت و آبجکت:
نکته این برنامه این است که ما یک اسپریت داریم ولی چند تا آبجکت. یعنی آبجکت ها ، دارای اسپریت یکسانی هستند.
خواستم فرق اسپریت و آبجکت را بدانید.
ما یک اسپریت داریم به نام ayu.
اسپریت بوسیله آبجکت ها استفاده میشه. الان image1 و image2 و .... آبجکت هستند.
مثلا فرض کنید یک پیراهن قرمز هست و ۷ تا برادر اون پیراهن قرمز را می پوشند و می روند بیرون از خانه. پس ما ۷ برادر داریم که همگی یک کپی از پیراهن قرمز را استفاده کردند.

عمق چیست؟

در مورد اون تابع setDepth هم که عمق ۱ به آبجکت image3 داده ، خودتون کد را می بینید.
عمق یعنی کدوم بالا باشه و کدوم پایین. اولش که آبجکت ها رسم شدند ، فکر کنم هم عمق بودند و هر یکی می افتاد روی رسم قبلی. یعنی هر کدام دیرتر رسم شود می افتد روی قدیمی تر.

من وقتی اون تاپیک ساخت بازی با کانواس و جاوا اسکریپت کار می کردم ، برای اینکه مثلا درخت روی ماشین رسم شود ، درخت را بعد ماشین رسم می کردم. من چیزی به نام عمق اونجا نداشتم. ولی اینجا phaser ابزاری به نام عمق را برای شما ساخته ، تا بتوانید تعیین کنید کدام روی کدام رسم شود.

saalek110 · Mar 7, 2024

مشکل کچ cache :

یک مشکلی که روی هاست من دارم اینه که وقتی محتوای یک فایل js را عوض می کنیم، بی فایده است و فایل مجدد خونده نمیشه... یعنی بار اول هر چس داخلش بوده میشه ملاک. و هر چی ادیتش کنی ، محتوای جدید خونده نمیشه. و اگر محتوای یک فاقل js را عوض کردی باید اسم فایل را هم عوض کنی تا خونده بشه. فکر کنم بخاطر کچ است.

پس شاید بهتر باشه اصلا کدهای جاوا اسکریپت را از فایل html خارج نکنیم تا مشکل کچ پیش نیاید.
پس در پست قبل ، من کدهای جاوا اسکریپت را گذاشتم داخل فایل html بماند ، چون وقتی می خواستم فایل js را ادیت کنم ، باید نامش را هم عوض می کردم و در فایل html هم می گفتم نام فایل جدید چیه که مکافات داشت.

saalek110 · Mar 7, 2024

حواشی تمام شد

فکر کنم حواشی کار تمام شد و حالا می توانیم کدها را کار کنیم.
حواشی مثلا لینک دادن به فایل phaser بود ، که به فایل واقع در سرور phaser لینک بدهیم یا به فایل phaser ئی که خودمان روی هاست آپلود کردیم.

و دیدیم که اگر فایل js بسازیم کچ میشه و هر چی ادیتش کنیم انگار نه انگار ، پس از خیر فایل js ساختن هم گذشتیم ولی شما یاد گرفتید چطوری فایل با پسوند js بسازید و چطور بهش لینک بدهید.

درضمن حتما لازم نیست هاست ثبت نام کنید. در کامپیوتر و گوشی خودتون می توانید بازی بسازید.
بعدا اگر تست کردم بیشتر شرح می دهم.

saalek110 · Mar 7, 2024

لیست برنامه ها:

Phaser CE Examples

مرور کار:

تا اینجای کار ، اسپریت را شناختیم و دیدیم در preload اسپریت ها با آدرس عکسها ساخته می شوند.
و دیدیم آبجکت ها از اسپریتها ساخته می شوند و در قسمت create به بازی add می شوند.

در لیست بالا ، یک قسمت basic هست ، فکر کنم برنامه های اولیه هست.

saalek110 · Mar 7, 2024

چرخش آبجکت

http://saalek121.fast-page.org/test/phaser/a6.html?i=1

کد زیر ، ساخت اسپریت و آبجکت و چرخش آبجکت است...

فقط کدهای تابع create تغییر کرده

JavaScript:

<!DOCTYPE html>
<html>
<head>

    <script src="phaser/phaser.min.js"></script>

</head>
<body>
<script>
  class Example extends Phaser.Scene
  {
      constructor ()
          {
 super();
   }

 preload ()
 {
 this.load.image('ayu', 'assets/pics/aya_touhou_teng_soldier.png');
             }
 create ()
              {
 var s = this.add.sprite(180, 160, 'ayu');

    s.rotation = 0.14;

 
     }//function
        }  // class

    const config = {
     type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
     parent: 'phaser-example',
     scene: Example
     };
const game = new Phaser.Game(config);

</script>
</body>
</html>

همان طور که در عکس می بینید چرخش عکس را داریم که با کد:

JavaScript:

  s.rotation = 0.14;

ایجاد شده.

saalek110 · Mar 7, 2024

http://saalek121.fast-page.org/test/phaser/a7.html?i=1

JavaScript:

<!DOCTYPE html>
<html>
<head>

    <script src="phaser/phaser.min.js"></script>

</head>
<body>

<script>
var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.spritesheet('balls', 'assets/sprites/balls.png', { frameWidth: 17, frameHeight: 17 });
}

function create ()
{
    text = this.add.text(10, 10, '', { font: '16px Courier', fill: '#00ff00' });

    this.input.on('pointerdown', function (pointer) {

    this.add.image(pointer.x, pointer.y, 'balls', Phaser.Math.Between(0, 5));

    }, this);
}

function update ()
{
    var p = this.input.activePointer;

    text.setText([
        'x: ' + p.x,
        'y: ' + p.y,
        'duration: ' + p.getDuration()
    ]);
}

</script>
</body>
</html>

سورس بالا ، کمی سطحش سنگین است.می توانید ندیده بگیرید. دم دست بود پست زدم.

هر جا را تاچ کنید یک توپ رنگی ایجاد می شود.
در قسمت preload دقت کنید یک اسپریت شیت به نام balls را داره لود می کنه. یک عکس ساده نیست.

در قسمت create ، اومده input را روشن کرده و برایش یک تابع تعیین کرده.
داخل اون تابع شی خلق میشه که x و y اون شی با محل تاچ برابر است و عکسش هم از balls گرفته میشه بعلاوه یک عدد بین صفر تا ۵....
این سورس بی موقع پست شده.... شرحش الان مشکله.

یک تابع update هم می بینید که فکر کنم تابحال نداشتیم. تابحال فقط دو تابع preload و create را داشتیم.. و حالابا سومین تابع مهم به نام update آشنا می شویم.

تابع update یک فرق مهم با دو تابع دیگر یعنی preload و create دارد. تابع update مدام در حال اجراست.

داخل تابع update اومده مشخصات تاچ را گرفته و در text ئی که در تابع create خلق شده بود ، مشخصات تاچ را نمایش می دهد.

البته سورس زیاد سختی هم نیست ، قابل فهم است ، ولی باید طبق روال درست سورس می زدم.

فایل balls.png هم ضمیمه شد، عکس زیر:

می بینید که ۶ توپ است ، برای همین از صفر تا ۵ در برنامه نام برده شده.

saalek110 · Mar 7, 2024

بسته هایی که من دارم:

اون بسته mirror ، با اون سایت لیست برنامه ها یکی است.
ولی من یک بسته دیگر دارم که ساختار کدها فرق دارد و من دارم از روی اون پست می زنم.

دقیق نمی دونم چرا ساختار سورس ها در این دو بسته فرق داره. جهت اطلاع گفتم.

saalek110 · Mar 7, 2024

saalek110 · Mar 7, 2024

من تصمیم گرفتم نرم افزار webserverرا نصب کنم و کدها را آفلاین کار کنم.

یک فایل را بیرون پوشه اون نرم افزار سرور گذاشتم اجرا شد. شاید بدون اون نرم افزار هم فایلهای بازی phaser اجرا می شود.فکر کنم من اشتباه کردم گفتم اون نرم افزار سرور ساز نیاز است.

آپلود و کار روی هاست سخت تره تا روی لوکال.
وقتی سورس درست کار کرد ، اون وقت آپلود می کنم.

saalek110 · Mar 7, 2024

saalek110 · Mar 7, 2024

ساده تر شده برنامه قبلی:

JavaScript:

<!DOCTYPE html>
<html>
<head>

    <script src="phaser/phaser.min.js"></script>

</head>
<body>

<script>
var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.spritesheet('balls', 'assets/sprites/balls.png', { frameWidth: 17, frameHeight: 17 });
}

function create ()
{

    this.input.on('pointerdown', function (pointer) {

    this.add.image(pointer.x, pointer.y, 'balls', Phaser.Math.Between(0, 5));

    }, this);
}



</script>
</body>
</html>

http://saalek121.fast-page.org/test/phaser/a8.html?i=1

همون برنامه قبلی را ، قسمتهایی ازش را حذف کردم تا ساده تر بشه.
تابع update را حذف کردم...
پس در کد زیر:

JavaScript:

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create
    }
};

هم تابع update حذف شد.قبلا تابع update را هم داشت. برنامه قبلی را نگاه کنید داره.
اجرایط مثل همون برنامه قبلی است ولی دیگه مختصات تاچ و و اینها را چاپ نمی کنه.

saalek110 · Mar 7, 2024

خطایابی:

کد زیر را:

JavaScript:

this.add.text(16, 16, 'welcome');

می توانید بین خطوط برنامه قرار دهید تا ببینید تا کجا برنامه اجرا میشه.
البته به جای welcome عبارات متنوعی بنویسید و مختصات متنوعی بدهید تا روی هم نیافتند.

saalek110 · Mar 7, 2024

برنامه نمایش مشخصات کانفیگ:

http://saalek121.fast-page.org/test/phaser/a1/a1.html?i=1

JavaScript:

<!DOCTYPE html>
<html>
<head>

    <script src="../phaser/phaser.min.js"></script>

</head>
<body>

<script>
var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create
    },
    //  Open the Dev Tools
    //  The text in the banner will be in white on a neon pink background.
    //  The colors at the start of the background array define the blocks
    //  at the beginning of the banner
    title: 'Shock and Awesome',
    banner: {
        text: '#ffffff',
        background: [
            '#fff200',
            '#38f0e8',
            '#00bff3',
            '#ec008c'
        ],
        hidePhaser: true
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('ayu', '../assets/pics/aya_touhou_teng_soldier.png');
 
}

function create ()
{
    this.add.image(400, 300, 'ayu');

    var text = this.add.text(80, 550, '', { font: '16px Courier', fill: '#ffffff' });

    text.setText([
        'Game Title: ' + game.config.gameTitle
    ]);
}
</script>
</body>
</html>

این برنامه ، عنوان بازی را از config می خواند و چاپ می کند.

title — game title
type — render type, can be CANVAS, WEBGL, or AUTO. Many effects can be unavailable with the CANVAS type that are available with the WEBGL one. In this tutorial, we’ll be using the latter
parent — DOM element id of the page where we’ll add a Game canvas element)
backgroundColor — the background color of the canvas
scale — setting for resizing the game canvas. Our choice is mode: Phaser.Scale.ScaleModes.NONE since we’ll have our own sizing system. Read more about modes here
physics — an object for setting the game physics
render — additional properties of a game render
callbacks — callbacks that will be triggered BEFORE (preBoot) or AFTER (postBoot) the game is initialized
canvasStyle — CSS styles for the canvas element where the game will be rendered
autoFocus — autofocus on the game canvas
audio — sound system settings
scene — a list of scenes to load and use in the game.

Phaser.js: A Step-by-Step Tutorial On Making A Phaser 3 Game | Shakuro

Learn using Phaser 3 game engine and build your first web game. A comprehensive guide and tutorial to game development in JavaScript with Phaser.js framework.

shakuro.com

در متن انگلیسی بالا ، لیست عناوین config و شرح هر یک آورده شده.

saalek110 · Mar 7, 2024

کشیدن یک خط و ۳ نوشته:

http://saalek121.fast-page.org/test/phaser/a1/a2.html?i=1

JavaScript:

<!DOCTYPE html>
<html>
<head>

    <script src="../phaser/phaser.min.js"></script>

</head>
<body>

<script>
var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: {
        create: create,
    }
};

var game = new Phaser.Game(config);

function create()
{
    var graphics = this.add.graphics();

    graphics.lineStyle(1, 0xffffff, 1);
    graphics.lineBetween(200, 0, 200, 600);

    //  Align only works with multi-lined text.

    this.add.text(200, 100, 'Case shrugged.\nThe girl to his right giggled and nudged him.', { color: '#00ff00', align: 'left' });
    this.add.text(200, 200, 'Case shrugged.\nThe girl to his right giggled and nudged him.', { color: '#00ff00', align: 'right' });
    this.add.text(200, 300, 'Case shrugged.\nThe girl to his right giggled and nudged him.', { color: '#00ff00', align: 'center' });
}
</script>
</body>
</html>

یک خط و ۳ تا نوشته است. خیلی ساده است.

saalek110 · Mar 8, 2024

saalek110 · Mar 8, 2024

برنامه الماس ها:

JavaScript:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>

    <script>

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.spritesheet('diamonds', 'assets/sprites/diamonds32x5.png', { frameWidth: 64, frameHeight: 64 });
    }

    create ()
    {
        const gems = [];

        for (let i = 1; i < 64; i++)
        {
            const x = Phaser.Math.Between(100, 700);
            const y = Phaser.Math.Between(100, 500);
            const frame = Phaser.Math.Between(0, 4);

            gems.push(this.add.sprite(x, y, 'diamonds', frame));
        }

        this.add.text(16, 16, 'Click to find the first Red gem with a Scale of 1');

        const redFrame = this.textures.getFrame('diamonds', 0);

        this.input.on('pointerdown', () => {

            //  Get the first sprite with a scale of 1 that is using the Red frame
            const red = Phaser.Actions.GetFirst(gems, { scaleX: 1, frame: redFrame });

            if (red)
            {
                this.children.bringToTop(red);

                this.tweens.chain({
                    targets: red,
                    tweens: [
                        {
                            scale: 2,
                            duration: 400,
                            ease: 'Bounce.easeOut'
                        },
                        {
                            delay: 500,
                            scale: 0,
                            duration: 1000
                        }
                    ]
                });
            }

        });
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);


</script>

</body>
</html>

http://saalek110.great-site.net/amozesh/phaser/c1.html?i=1

رفرش کنید و چند بار تاچ کنید ، یکی از الماس های قرمز می آید رو.
این سورس کد پیچیده ای دارد و لازم نیست اول کار این کدها را تحلیل کنید. چند پست بعد ، کد ساده شده این سورس را پست زدم.

شرح سورس در پست بعدی.

saalek110 · Mar 8, 2024

سورس بالا کمی پیچیده است و دلیلی هم ندارد که بخواهید اون را تحلیل کنید و بفهمید.
شرح:
در قسمت preload می بینید که فقط یک شکل داریم. ولی در حقیقت اون شکل ۵ فریم دارد.
چون در این کد:

JavaScript:

const frame = Phaser.Math.Between(0, 4);

از صفر تا ۴ شمرده.
اول تابع create یک آرایه تعریف شده:

JavaScript:

const gems = [];

جم فکر کنم به معنی الماس است.
بعد تعریف آرایه ، یک حلقه داریم که از عدد ۱ تا زیر ۶۴ می شمارد. فکر کنم تعداد الماس های ایجاد شده خواهد شد این عدد.
عبارت gems.push ، اضافه کردن عضوی به آرایه است. ربطی به phaser ندارد. مربوط به کار با آرایه است. چهار کلمه push و pop و shift و unshift برای اضافه کردن و کم کردن عضو به آرایه است...حالا چرا ۴ تا عملیات است...چون آرایه دو سر دارد. اگر به این سرش اضافه کنیم ، فرق داره تا به اون سرش اضافه کنیم. اگر جایی صف در خیابان دیدید ، سر صف و ته صف می دانید فرق داره.
پس کلمه push عضوی به آرایه اضافه می کند.
در حین خلق الماس ، فریم اون هم بین صفر تا ۴ بهش داده میشه تا الماس هایی با رنگهای مختلف ساخته بشه.
می بینید که محل نشستن الماس ها هم با Between در یک محدوده ای تعیین شده. یعنی عدد خاص و ثابتی نداده ، گفته در این محدوده باشه. کد زیر:

JavaScript:

const x = Phaser.Math.Between(100, 700);
            const y = Phaser.Math.Between(100, 500);
            const frame = Phaser.Math.Between(0, 4);

            gems.push(this.add.sprite(x, y, 'diamonds', frame));

تا اینجا شد خلق الماس ها.

بعدش یک تابع پاسخ گویی به تاچ ایجاد کرده.
و من چیزی که از کارکرد بازی فهمیدم ، اینه که وقتی تاچ می کنی ، یک الماس قرمز می آید بالا...یعنی اگر قبلا مثلا زیر یک الماس دیگر بود ، در رو قرار می گیرد.
ولی به کد که نگاه می کنم و کلمه GetFirst را می بینم ، شاید دنبال اولین الماس قرمز است.
یعنی برنامه شاید کارش پیدا کردن اولین الماس قرمز است.
خط زیر:

JavaScript:

const red = Phaser.Actions.GetFirst(gems, { scaleX: 1, frame: redFrame });

دقیق نمی دونم کارش چیه ، ممکن است اولین الماس قرمز را پیدا می کند.
اینکه بعد این خط if نوشته ، یعنی اگر red وجود داشت...(خط کد بالا ، حاصلش می بینید که red است) فکر کنم چون فریم ها تصادفی انتخاب می شوند ، ممکن است در ۶۳ تا الماس هم یک الماس قرمز ایجاد نشود، پس شاید احتیاط کرده و قبل دستکاری الماس قرمز اول ، بررسی کرده ببینید که اصلا الناس قرمز اول وجود دارد یا نه.
و اگر وجود داشت... داخل کروشه های if اون الماس را آورده بالا...باقی کدهای درون کروشه های if حالا چیه؟ کلمه tweens شاید از ساخته های phaser باشد. و اینکه چه کار می کند نمی دانم. باشه برای بعد شاید سرچ کردم اینجا گفتم.

saalek110 · Mar 8, 2024

کار با امیتر:

http://saalek121.fast-page.org/test/phaser/a1/a3.html?i=1

JavaScript:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>

    <script>
    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 }
            }
        },
        scene: {
            preload: preload,
            create: create
        }
    };

    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');
    }

    function create ()
    {
        this.add.image(400, 300, 'sky');

        var particles = this.add.particles('red');

        var emitter = particles.createEmitter({
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        });

        var logo = this.physics.add.image(400, 100, 'logo');

        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);

        emitter.startFollow(logo);
    }
    </script>

</body>
</html>

سالک:
من چیزی دانلود نکردم. لینک داده به سایت خودش.

در برنامه فوق با امیتر یا پارتیکل امیتر آشنا می شویم.
چیزهایی مثل نور یا دود ، و کلا چیزهایی که یک شکل ثابت ندارند ، امیتر هستند.
کد ساخت امیتر را ملاحظه می کنید.

فایل red.png که با آن پارتیکل امیتر ساخته شده را ضمیمه می کنم تا مقایسه کنید:

JavaScript:

var emitter = particles.createEmitter({
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        });

من هنوز با امیتر در phaser کار نکردم ، ولی در یک محیط گرافیکی دیگر ، یادمه با تغییر مقادیر ، شکل پارتیکل امیتر عوض میشد. اونجا بهش می گفتند پارتیکل امیتر ، برای همین من با این اسم عادت دارم و این جوری صدایش می کنم. ولی در کد بالا نوشته emitter .... فکر کنم با تغییر مقادیری که در کد بالا داده شده ، بتوان نتایج متنوعی داشت. خودتان امتحان کنید.

تفسیر کد:
یک آسمان داریم که بک گراند را ساخته،
اون عکس phaser مثل توپی حرکت می کند و در کد این طور به نظر رسیده که امیتر بهش افزوده شده.
امیتر معمولا به چیزی یا جایی وصل می شود. مثلا دود آتش که امیتر است به شکل آتش وصل می شود. یا دود خودرو به اگزور وصل می شود. در اینجا امیتر به شکل phaser وصل شده و آن را همراهی می کند.

چرا از پارتیکل امیتر استفاده می کنیم؟

در محیط های گرافیکی ، ساخت اجسام ثابت یک طرف ، و افزودن امیترها یک طرف.
اگر شما از امیتر استفاده نکنید محیطی ساکن و بی حرکت ساخته اید ، به هر چیزی نگاه می کنید تکان نمی خورد. ولی در دنیای واقعی ، مثلا ریزش برگ درخت ، حرکت دود و بخار دیگ و .... حالتی زنده و در حرکت ایجاد می کند.