بازی ساز phaser

saalek110

saalek110

Well-Known Member
کلی سورس را سایت خودش ، اجرایش را نشان داده.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
github.com

GitHub - phaserjs/phaser-ce-examples: Contains hundreds of source code examples and related media for the Phaser HTML5 Game Framework.

Contains hundreds of source code examples and related media for the Phaser HTML5 Game Framework. - phaserjs/phaser-ce-examples
github.com github.com

بسته لینک بالا، ...

و همچنین این بسته لینک پایینی:

github.com

GitHub - samme/phaser-examples-mirror: Phaser CE examples

Phaser CE examples. Contribute to samme/phaser-examples-mirror development by creating an account on GitHub.
github.com github.com

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

بسته اولی ۱۷۰ مگا ، زیپش بود.
بسته دومی حدود ۲۰۰ مگا.

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

در هر دو بسته دانلود شده، کلی عکس و آهنگ و چیزهای دیگه هم هست که برای بازی سازی خوبه.

در بسته اولی هم ، یک فایل html هست که لینک همه برنامه ها را به شکل لیست داره و هر کدام را بزنی ، اجرای بازی و کد بازی را همزمان نشان می دهد.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
آلبوم آنلاین و آفلاین:

در پست قبلی ، بسته قابل مرور در دستگاه را معرفی کردم
و در پست قبلش ، همون فایلها online هست.

و مثل یک آلبوم phaser است.
 
saalek110

saalek110

Well-Known Member
شما خودتون می توانید نمونه برنامه های این آلبوم را ببینید و آنچه نیاز دارید را بردارید و استفاده کنید.
 
saalek110

saalek110

Well-Known Member
من هم می خواهم با نگاه به این نمونه برنامه ها ، تمریناتی در تاپیک بکنم.
 
saalek110

saalek110

Well-Known Member
من سعی می کنم ، برنامه هایی را انتخاب کنم از آلبوم فوق که ضروری تر باشه تا یک مسیر منطقی در سیر کار ایجاد بشود.
 
saalek110

saalek110

Well-Known Member
یک بسته ای که بالا معرفی شد و داخل اسمش mirror داشت ، در اصل کپی اون سایت آنلاین است که در پست قبلش معرفی کردم.
بالای اون پست ، درشت با قرمز نوشتم (( پست لیست برنامه ها )) ... اون آنلاینش است و در پست بعدش اون بسته ای که کلمه mirror دارد ، اون بسته آفلاین اش است...

در مورد عکسهای برنامه های من در پستهای بعدی:
من از همون بسته mirrror عکس برمیدارم و با اسامی همون پوشه ها در هاستم قرار می دهم تا با اون سایت و بسته ، یکسان باشیم.
پوشه اصلی عکسها پس میشه assets و داخلش یک پوشه sprites است و چند تا توپ رنگی داخل اون پوشه هست. مثلا red_ball.png یا blue_ball.png
پس اسامی فایلها و پوشه های عکس ، مشابه بسته است.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
اولین برنامه:
یک عکس و یک نوشته.

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('blue', 'assets/sprites/blue_ball.png', { frameWidth: 64, frameHeight: 64 });
    }

    create ()
    {
 
    this.add.sprite(260, 200, 'blue');
 
     this.add.text(16, 16, 'welcome');
}
}
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>





اجرا ، یک توپ آبی در صفحه داریم و یک کلمه welcome.

Screenshot_۲۰۲۴-۰۳-۰۶_۲۰۴۹۱۲.jpg
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
در برنامه پست قبل ، در این خط در header برنامه:
HTML: 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-arcade-physics.min.js"></script>

اومدیم به فایل phaser-arcade-physics.min.js لینک دادیم...
یعنی ما داریم phaser کار می کنیم ، پس از کلاسهاو توابع phaser استفاده می کنیم ، پس بالاخره باید یک جا لینک به فایل phaser بدهیم.
حالا چرا این فایل انتخاب شده و فرق فایلهای مختلف phaser چیه ، بعدا صحبت می کنیم.
 
saalek110

saalek110

Well-Known Member
ساختار کد:
کلاس برنامه ما که اسمش هست Example از کلاس Phaser.Scene مشتق شده، کد زیر:

JavaScript: 
class Example extends Phaser.Scene

فرض کنید یک کپی از کلاس Phaser.Scene خواهد شد....
در این کلاس Example مون ، می بینید که ۳ تا تابع داریم ، اولی کانستراکتور که داخلش نوشتیم سوپر ،
دومین تابع اسمش preload است که داخلش آدرس عکسی را به اسپریت blue نسبت دادیم..
سومین تابع create است که داخلش یک sprite و یک text را add کردیم.

بعد از تعریف کلاس Example می بینید متغیری به نام config تعریف شده و تنظیماتی داخلش ذخیره شده.

در خط آخر یعنی:
JavaScript: 
const game = new Phaser.Game(config);

یک game از روی Phaser.Game ساخته شده ، با تنظیمات config ....

پس دو تا چیز ساختیم ، یک کلاس از روی phaser.scene
و یک game از روی Phaser.game
این که phaser.scene و Phaser.game چیه را بعدا توضیح می دهیم.


فعلا می خواهیم ببینید که
در تابع preload آدرس عکس ها به اسپریت ها نسبت داده شده، ...
و در تابع create اسپریت ها ادد شده به کلاس.

پس شما عکسهای خود را در قسمت preload وصل می کنید به اسپریت ها،... با نامهای دلخواه برای اسپریت ها..اسپریت من اسمش blue است.
و در قسمت create هم اشیا را به بازی اضافه می کنید. یعنی من اسپریت خود به نام blue را به بازی اضافه کردم. یا متن هم به بازی اضافه شد.
 
saalek110

saalek110

Well-Known Member
برنامه دوم:
همون برنامه اولی ، در دو فایل html و js


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

  <script src="js/a2.js"></script>

</body>
</html>



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

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

    create ()
    {
 
    this.add.sprite(260, 200, 'blue');
 
     this.add.text(16, 16, 'welcome');
}
}
const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);


 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
در برنامه بالا ، دو تغییر نسبت به برنانه اول داریم.
اول اینکه کدهای جاوا اسکریپت را بردیم در یک فایل دیگه.
با کد:
JavaScript: 
  <script src="js/a2.js"></script>
کدهای جاوا اسکریپت رفته در پوشه js ، داخل فایل a2.js. خواستم فایل js با خود فایل هم نام باشه ولی الزامی نیست... برای راحتی شماست. اسم فایلم a2.html بود.

دوم اینکه فایل phaser مورد استفاده این بار اسمش هست: phaser.js

یک نکته اینکه ، تا من شپلپرفکن را روشن نکردم برنامه لود نمیشد...فکر کنم فایل phaser نیاز به نرم افزار شپلمر داره تا لود بشه.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
در دو برنامه بالا ، به فایلهای phaser.js و phaser-arcade-physics.min.js لینک دادیم.
من فایل phaser.js را در هاستم آپلود می کنم.

در لینک زیر:

phaser.io

Phaser v3.87.0 "Hanabi"

Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.
phaser.io

فایل phase.js برای دانلود هست. سایت خود phaser است. ممکن است سالهای بعد ساختار سایت عوض بشه.. پس سالهای بعدی ، کلا هر جای سایت phaser.js را پیدا کردید دانلود کنید.الان ۲۰۲۴ اوریل است. اسفند ۱۴۰۲

فایل phaser.js حجمش ۷ مگا است و من هاستم مجانی است. مقداری مشکل آپلود دارم.


حالا بیایید دیگه به فایل phaser در سایتش دیگه لینک ندهیم و از فایل خودمان استفاده کنیم.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
HTML: 
<!DOCTYPE html>
<html>
<head>

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

</head>
<body>

  <script src="js/a3.js"></script>

</body>
</html>

در این فایل به فایل phaser که در هاست خودمه لینک دادم...


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

در این برنامه یاد گرفتیم که فایل phaser.js را خودمان داشته باشیم و به فایل خودمان لینک بدهیم.
فایل a3.js همان a2.js است. فقط یک کمی گرفتم اسم a3 رویش گذاشتم تا با a3.html هم نام باشه. برای قشنگی. پس کدش هم ، همان کد توپ آبی است و نتیجه اجرای برنامه هم تغییری نکرده.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
پس در چند پست بالا ، کدهای جاوا اسکریپت را اولش در خود فایل داشتیم
بعد گذاشتیم بیرون در یک فایل دیگه ....تا هر دو مدلش را ببینید...
فایل phaser ما دو فایل مختلف بود ، روی سایت phaser با نامهای phaser.js و phaser-arcade-physics.min.js

که بعدش اومدیم فایل phaser.js را روی هاست خودمان آپلود کردیم.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
پست ۴۰ :

درد دل:
من نگاهی که به سورس های اون بسته کردم...
مدام از اسامی ساخته شده phaser استفاده شده....
یعنی همه چیز را پوشش داده این phaser....
یعنی در یک بازی ساز غوطه می خوریم... و دیگه از جاوا اسکریپت طبیعی خبری نیست.

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

یعنی در دنیای phaser هستید و باید با کلمات و اصطلاحات اون آشنا بشوید و با اون ابزارها کارهاتون را انجام دهید.

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

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

شاید بهتر باشه از دو تاپیک (( آموزش ساخت بازی با کانواس و جاوا اسکریپت )) و (( ساخت بازی با کانواس و جاوا اسکریپت )) کار خود را شروع کنید. کاری که من خودم کردم. یعنی من از اونجا شروع کردم بعدش اومدم اینجا.
مثلا برای پیدا کردن اشکال برنامه ها اونجا من روشهایی را گفتم. خوب اینجا هم بهرحال محیط جاوا اسکریپت است و اگر برنامه شما مثلا غلط املایی داشت باید بدونید چطوری پیدایش کنید.
در اون تاپیک اولین بار بود من جاوا اسکریپت کار می کردم. قبلش php کار کرده بودم. php قضیه اش فرق داره.. اگر اعلام خطا را درش روشن کنی ، بهت میگه کدوم خط مشکل داره.. ولی جاوا اسکریپت تا جایی که من بلدم چنین چیزی نداره. خلاصه اون تاپیک محیط تمرین من بود ، ممکن است بزای شما هم مفید باشد.
 
آخرین ویرایش:
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا