آموزش ساخت بازی های HTML5 با Phaser 3

سرفصل ها و درس ها

معرفی Introduction

• معرفی Introduction

• درمورد من About Me

• ابزار مورد نیاز Tools needed

• چرا از سرور محلی استفاده کنیم؟ Why Use A Local Server?

• راه اندازی سرور محلی Setting up a local server

• ساختار پوشه بازی را تنظیم کنید Set up the game folder structure

• دانلود کتابخانه Phaser Download Phaser library

• ساخت کلاس های جاوا اسکریپت Making JavaScript Classes

• یک قالب اولیه فازر تنظیم کنید Set up a basic Phaser Template

• توابع داخلی فازر Phaser built-in functions

• ابزارهای اشکال زدایی Debugging Tools

مبانی فازر Phaser Basics

• اضافه کردن تصاویر در Phaser - نمای کلی Adding Images in Phaser - Overview

• افزودن تصویر Adding an image

• ویژگی های تصویر/جن Image/Sprite properties

• درک منشاء و مرکز تصویر Understanding image origins and centering

• صفحات اسپرایت/انیمیشن ها Sprite sheets/Animations

• حرکت جن Sprite movement

• توئینز Tweens

• تشخیص کامل شدن توئین Detecting when a tween is complete

• Tween Scope Alternative Tween Scope Alternative

• اضافه کردن متن Adding Text

• حالت دادن به متن/فونت های گوگل Styling text/Google Fonts

• کلیک کردن روی یک جن Clicking a sprite

• استفاده از گرافیک فازر Using Phaser graphics

• اضافه کردن صدا Adding Sound

• درباره گروه ها About Groups

• درباره کانتینرها About Containers

• ساخت جعبه ابزار از قطعات بازی Building a toolbox of game parts

بازی 1 - Road Rush Game 1 - Road Rush

• معرفی Road Rush Road Rush Introduction

• بارگذاری تصاویر Load Images

• کلاس جاده را بسازید Make the road class

• بارگذاری تصاویر Load Images

• اندازه جاده Size road

• بخش جعبه ابزار - مقیاس بندی تصاویر Toolbox part - Scaling Images

• جعبه ابزار قسمت مرکزی Toolbox part- Centering

• خطوط مرکزی ایجاد کنید Make center lines

• خطوط وسط را حرکت دهید Move center lines

• اسپرایت ماشین را اضافه کنید Add the car sprite

• برای تغییر مسیر کلیک کنید Click to change lanes

• اضافه کردن تصاویر موانع Add obstacles images

• موانع را اضافه کنید Add obstacles

• یک انسداد تصادفی ایجاد کنید Make a random obstruction

• تغییر سرعت و مقیاس Changing speed and scale

• قسمت جعبه ابزار - بررسی کننده برخورد Toolbox part - collision checker

• بررسی برخورد را به بازی اضافه کنید Add collision checking to game

• جعبه ابزار پارت مدل Toolbox part-model

• بخش جعبه ابزار - توزیع کننده رویداد Toolbox part - event dispatcher

• قطعات جعبه ابزار - ثابت Toolbox parts - constants

• قسمت جعبه ابزار - کنترلر بازی Toolbox part - Game Controller

• قسمت جعبه ابزار - جعبه امتیاز Toolbox Part - Scorebox

• جعبه امتیاز را به بازی اضافه کنید Add score box to game

• قسمت جعبه ابزار - Align Grid - Draw Grid Toolbox part - Align Grid - Draw Grid

• بخش جعبه ابزار - تراز کردن شبکه - جای موارد Toolbox part - Align Grid - Place Items

• بخش جعبه ابزار - Align Grid - Simplify Placement Toolbox part - Align Grid - Simplify Placement

• بخش جعبه ابزار - پیکربندی موبایل Toolbox part - Mobile configuration

• Grid را به بازی اضافه کنید Add Grid to Game

• بخش جعبه ابزار - دکمه متن Toolbox part - Text Button

• بخش جعبه ابزار - رویدادهای دکمه متن Toolbox part - Text Button Events

• بخش جعبه ابزار - پارامترهای دکمه متن Toolbox part - Text Button Parameters

• بخش جعبه ابزار - متن دکمه متن Toolbox part - Text Button Text

• بخش جعبه ابزار - صفحه عنوان Toolbox part - Title Screen

• قسمت جعبه ابزار - بازی روی صفحه Toolbox Part - Game Over Screen

• قسمت جعبه ابزار - چرخاندن دکمه متن Toolbox Part - Text Button Rollover

• اضافه کردن صفحه نمایش به بازی Add screens to game

• قسمت جعبه ابزار - مدیا منگر قسمت 1 Toolbox part - Media Manger part 1

• قسمت جعبه ابزار - مدیر رسانه قسمت 2 Toolbox part - Media Manager part 2

• قسمت جعبه ابزار - مدیا مدیر قسمت 3 Toolbox part - Media Manager Part 3

• قسمت جعبه ابزار - دکمه‌های جابه‌جایی Toolbox Part - Toggle Buttons

• جعبه ابزار قسمت - دکمه های صدا Toolbox Part- Sound Buttons

• دکمه های صدا را تنظیم کنید Adjust Sound Buttons

• دکمه ها را به بازی اضافه کنید Add Buttons to the game

• پاک کردن کد! Cleaning up the code!

• صداها را به بازی اضافه کنید Add Sounds to the game

• پخش صداها Play Sounds

• تصادف در! Crash!

• بازی دوباره Playing Again

• یک صحنه لود بسازید Make a load scene

• پیشرفت Preloader Preloader progress

• بخش جعبه ابزار - جزء نوار Toolbox part - Bar component

• یک نوار پیشرفت به بازی اضافه کنید Add a progress bar to the game

• صحنه بار را به جعبه ابزار اضافه کنید add the load scene to the toolbox

• جاده را کپی کنید Copy the road

• سفارشی کردن جعبه امتیاز Customizing the score box

• سرعت بخشیدن به بازی Speeding up the game

• سفارشی کردن صفحه عنوان Customizing the Title Screen

• تمیز کردن جعبه ابزار Cleaning up the Toolbox

• رفع صوتی! Audio Fix!

مقدمه ای بر فیزیک فاز Introduction to Phaser Physics

• معرفی Introduction

• تنظیم - اضافه کردن تصاویر Set Up - Add images

• با استفاده از جاذبه Using Gravity

• ساختن زمین Making the ground

• پریدن سیب Bouncing the apple

• با استفاده از سرعت Using Velocity

بازی 2- دیوانگی پنگ Game 2- Pong Frenzy

• معرفی Introduction

• برپایی Set Up

• توپ را اضافه کنید Add ball

• پاروها را اضافه کنید Add Paddles

• اضافه کردن پس زمینه Add background

• فیزیک توپ Ball physics

• رسیدگی به برخوردها handling collisions

• سرعت توپ ball velocity

• ست کردن رنگ توپ Set ball color

• دست و پارو عوض کن Change paddle

• دست و پارو حرکت دهید Move paddle

• پاروها را به عقب حرکت دهید Move paddles back

• دست و پا زدن flip paddles

• جعبه امتیاز score box

• بازی تمام شد game over

• نکته ها Points

• سرعت دادن Speed up

• بارگیری صداها Load sounds

• پخش صداها Play sounds

• صفحه عنوان Title Screen

بازی 3 - نبرد فضایی Game 3 - Space Battle

• معرفی Introduction

• راه اندازی بازی Set Up Game

• بارگذاری تصاویر Load Images

• کشتی را اضافه کنید Add ship

• اضافه کردن پس زمینه Add Background

• حرکت کشتی Move ship

• زاویه کشتی Ship angle

• مقیاس کشتی Ship Scale

• حرکت کشتی را متوقف کنید Stop the ship moving

• دوربین فازر Phaser Camera

• سنگ را اضافه کنید Add Rocks

• محل صخره ها Place Rocks

• سنگ ها را حرکت دهید Move Rocks

• تعیین محدوده بازی Setting the game bounds

• برخورد خود گروهی فیزیک Physics group self collision

• تشخیص یک کلیک طولانی Detecting a long click

• ساخت گلوله Making bullets

• سنگ ها را نابود کنید Destroy the rocks

• ایجاد انفجار Making an explosion

• سنگ ها را منفجر کنید Blow up the rocks

• کشتی دشمن را اضافه کنید Add the enemy ship

• کشتی دشمن را حرکت دهید Move the enemy ship

• تشخیص نزدیکی detect proximity

• شلیک گلوله دشمن Fire enemy bullet

• گاز گلوله Bullet throttling

• اطلاعات بازیکن را اضافه کنید Add player information

• اضافه کردن آیکون ها Add icons

• توقف UI از پیمایش Stop UI from scrolling

• بگذار دشمن به صخره ها شلیک کند Let the enemy shoot the rocks

• بازیکن به دشمن آسیب می زند Player damages Enemy

• اجازه دهید دشمن به بازیکن آسیب برساند Let the enemy damage the player

• برخورد کشتی با مرزهای بازی Ship collisions with the game borders

• تعادل بازی قسمت 1 Game balancing part 1

• تعادل بازی قسمت 2 Game balancing part 2

• برخورد صخره ها به کشتی ها Rocks hitting the ships

• آسیب سپر Shield damage

• افزودن سنگ های بیشتر Adding more rocks

• بازی تمام شد Game Over

• بازی روی صفحه نمایش Game Over screen

• به روز رسانی اشکال! Update bug!

• صفحه عنوان Title Screen

• پاک کردن کد! Cleaning up the code!

• جلوه های صوتی Sound effects

• موسیقی پس زمینه Background music

• مقابله با اشکالات! Dealing with bugs!

• اشکال شماره 1 بعد از تنظیم مجدد نمی توان سنگ ها را شلیک کرد Bug #1 Can not shoot rocks after reset

• اشکال شماره 2 وقتی دوربین پیمایش می‌شود، دکمه‌های جابه‌جایی کار نمی‌کنند Bug #2 Toggle buttons not worked when camera is scrolled

• نتیجه Conclusion