آموزش ساخت بازی‌های مرورگر با C++, Lua و WebAssembly - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

• پیوستن به جامعه کاربری، پرسش و پشتیبانی Join the Community - Ask Questions & Get Support

راه‌اندازی Setup

• نصب و راه‌اندازی Emscripten Install and Setup Emscripten

• نصب CMAKE Install CMAKE

• ساخت یک پروژه تست کوچک C++ Create Small Test C++ Project

رسم بر روی صفحه Drawing To The Screen

• رفع مشکلات Cmake و SDL Cmake and SDL Issue Fixes

• رسم یک مستطیل با استفاده از SDL Drawing a Rect using SDL

• افزودن Lua Adding Lua

• افزودن Sol2 Adding Sol2

• حرکت دادن مستطیل با استفاده از Lua Moving the Rect using Lua

شروع پروژه موتور Jadeite WASM Starting the Jadeite WASM Engine Project

• تغییر رندرر SDL به OpenGL - بخش اول Change using SDL Renderer to OpenGL - Part #1

• تغییر رندرر SDL به OpenGL - بخش دوم Change using SDL Renderer to OpenGL - Part #2

• ساخت فایل Batch برای اجرای پروژه Create RunProj Batch File

• بارگذاری تکسچرها - بخش اول Loading Textures - Part #1

• بارگذاری تکسچرها - بخش دوم Loading Textures - Part #2

• ساخت کلاس Shader Creating the Shader Class

• ساخت کلاس Texture Creating the Texture Class

• ساخت کلاس Asset Loader Creating the Asset Loader Class

• افزودن شیدرهای پیش‌فرض Adding Default Shaders

• افزودن کتابخانه ریاضی GLM Adding the GLM Math Library

• ساخت کلاس دوربین - بخش اول Creating the Camera Class - Part #1

• ساخت کلاس دوربین - بخش دوم Creating the Camera Class - Part #2

• افزودن Bindingهای Lua برای دوربین Adding the Camera Lua Bindings

• ساخت استراکت Vertex Creating the Vertex Struct

ورود به ECS (سیستم موجودیت-مؤلفه) با استفاده از Entt Getting Into ECS (Entity Component System) Using Entt

• افزودن کتابخانه Entt ECS Adding the Entt ECS Library

• ساخت Wrapper برای Registry - بخش اول Creating the Registry Wrapper - Part #1

• ساخت Wrapper برای Registry - بخش دوم Creating the Registry Wrapper - Part #2

• ساخت Wrapper برای Entity Creating the Entity Wrapper

• افزودن مؤلفه‌های پیش‌فرض Adding Default Components

• افزودن Bindingهای Lua برای مؤلفه‌ها Adding The Component Lua Bindings

• مروری سریع بر Entt::Meta Quick Overview of Entt::Meta

• ساخت ابزارهای Meta Creating the Meta Utilities

• افزودن Type_Hash به مؤلفه‌ها Adding the Type_Hash to the Components

• ساخت Meta Bindingها برای Entity Creating the Entity Meta Bindings

• ساخت Meta Bindingها برای Registry Creating the Registry Meta Bindings

• تغییرات در Registry و Runtime View Registry and Runtime View Changes

• ساخت موجودیت‌ها در Lua Creating Entities In Lua

• افزودن Bindingهای Lua برای GLM Adding GLM Lua Bindings

تکنیک‌های رندرینگ Rendering Techniques

• شروع Batch Renderer - بخش اول Starting Batch Renderer - Part #1

• شروع Batch Renderer - بخش دوم Starting the Batch Renderer - Part #2

• به‌کارگیری Batch Renderer در عمل Putting the Batch Renderer into Action

• افزودن کلاس فونت (Font) Adding the Font Class

• بارگذاری فونت با Asset Loader Loading Font with the Asset Loader

• ساخت مؤلفه متن (Text Component) Creating the Text Component

• شروع Text Batch Renderer Starting the Text Batch Renderer

• رندرینگ متن در عمل Text Rendering In Action

ورودی‌ها Inputs

• ساخت کلاس کیبورد Creating the Keyboard Class

• به‌کارگیری کلاس کیبورد در عمل Keyboard Class In Action

• ساخت کلاس ماوس Creating the Mouse Class

• ساخت کلاس گیم‌پد Creating the Gamepad Class

• به‌کارگیری کلاس گیم‌پد در عمل Gamepad Class In Action

پاک‌سازی فایل Main.cpp Cleaning Up Our Main.cpp

• ساخت کلاس Game - بخش اول Creating the Game Class - Part #1

• ساخت کلاس Game - بخش دوم Creating the Game Class - Part #2

صداها و موسیقی Sounds and Music

• ساخت کلاس پخش موسیقی (Music Player) Creating the Music Player Class

• ساخت کلاس پخش صدا (Sound Player) Creating the Sound Player Class

• بارگذاری و پخش صداها Loading and Playing Sounds

ابزارهای کاربردی Helpful Utilities

• ساخت کلاس Asset Manager Creating the Asset Manager Class

• به‌کارگیری Asset Manager در عمل! Asset Manager In Action!

• افزودن توابع اسکریپتی کاربردی Adding Some Helpful Script Functions

• حذف منابع موقت و بارگذاری از اسکریپت‌ها Remove Temporary Assets and Load From Scripts

• افزودن Bindingهای Lua برای صدا و پخش از اسکریپت‌ها Adding Sound Lua Bindings and Playing from the Scripts

• افزودن ابزارهای متنی کاربردی Adding Helpful Text Utilities

• افزودن کلاس تایمر (Timer) Adding the Timer Class

• بارگذاری مجدد منابع و داده‌های بازی Reloading Assets and Game Data

• اصلاح: تغییر منابع از Shared Ptrs به Unique Ptrs FIX: Changing the Assets from Shared to Unique Ptrs

وقفه بازی: ساخت بازی تتریس! Game Intermission: Creating Tetris!

• کلاس Lua برای بلوک‌ها Block Lua Class

• کلاس Lua برای شبکه (Grid) Grid Lua Class

• افزودن ابزارهای کاربردی تتریس Adding Some Tetris Utilities

• کلاس پایه Lua برای Tetromino Base Tetromino Lua Class

• ساخت کلاس فرزند Lua برای Tetromino Creating the Child Tetromino Lua Class

• شروع کلاس بازی در Lua Starting the Lua Game Class

• اصلاح اندازه متن!! Measure Text Fix!!

• افزودن توابع به کلاس Game Adding Some Game Class Functions

• اتمام بازی تتریس! Finishing Up Tetris!

• چالش تتریس! Tetris Challenge!

ورود به مباحث فیزیک Getting Into Physics

• افزودن کتابخانه Box2D Adding the Box2D Library

• ساخت Wrapperهای C++ برای Box2D Creating Some Box2D C++ Wrappers

• تئوری Contact Listener و UserData Contact Listener and UserData Theory

• پیاده‌سازی کلاس UserData Implementing the UserData Class

• پیاده‌سازی کلاس ContactListener Implementing the ContactListener Class

• درک دسته‌بندی‌های فیلتر (Filter Categories) Understanding Filter Categories

• پیاده‌سازی دسته‌بندی‌های فیلتر Implementing the Filter Categories

• ساخت داده‌های هسته موتور Creating the Core Engine Data

• شروع مؤلفه فیزیک - بخش اول Starting the Physics Component: Part #1

• ادامه مؤلفه فیزیک - بخش دوم Continuing the Physics Component: Part #2

• ادامه مؤلفه فیزیک - بخش سوم Continuing the Physics Component: Part #3

• اصلاح Bindingهای مؤلفه فیزیک Physics Component Binding Fixes

• به‌کارگیری فیزیک در عمل - بخش اول Putting the Physics Into Action!!: Part #1

• ادامه تست فیزیک - بخش دوم Continuing with Testing Physics: Part #2

• افزودن کلاس‌های RayCast و BoxTrace - بخش اول Adding the RayCast and BoxTrace Classes - Part #1

• افزودن کلاس‌های RayCast و BoxTrace - بخش دوم | مؤلفه فیزیک و Bindingهای Lua Adding the RayCast and BoxTrace Classes - Part#2 | Phys Comp and Lua Bindings

• چالش سرگرم‌کننده فیزیک! Physics Fun Challenge!

رسم اشکال Drawing Shapes

• ساخت Shape Batch Renderer - بخش اول Creating the Shape Batch Renderer - Part #1

• ساخت Shape Batch Renderer - بخش دوم Creating the Shape Batch Renderer - Part #2

• ساخت کلاس‌های اشکال (Shape) Creating the Shape Classes

• رسم اشکال Drawing Shapes

• رسم اشکال از طریق اسکریپت‌های Lua Drawing Shapes from Lua Scripts

• رسم Ray Castها و Box Traceها Drawing Ray Casts and Box Traces

ساخت یک بازی پلتفرمر Creating a Platformer Game

• هشدارهای Build وب Emscripten - مفهوم و نحوه رفع آن‌ها Emscripten Web Build Warnings - What They Mean and How to Fix Them

• ساخت نقشه‌ها با استفاده از Tiled Map Editor Creating Maps using the Tiled Map Editor

• بارگذاری نقشه‌ها از Tiled - بخش اول Loading Maps from Tiled - Part #1

• بارگذاری نقشه‌ها از Tiled - بخش دوم Loading Maps from Tiled - Part #2

• بارگذاری شخصیت‌ها و موجودیت‌ها Loading Characters and Entities

• افزودن فیزیک به تایل‌ها و داده‌های کاربرد فیزیکی بیشتر Adding Tile Physics and More Physics User Data

• افزودن دوربین دنبال‌کننده و اصلاحات دوربین Adding the Follow Camera and Camera Fixes

• افزودن انیمیشن‌های ساده دو-بعدی Adding Simple 2D Animations

• تنظیم انیمیشن‌ها برای استفاده از UV Generation جدید Adjusting Animations to Use the New UV Generation

• شروع افزودن کد حرکت بازیکن و داده‌های کاربر بازیکن Start Adding Player Movement Code and Player User Data

• قرینه کردن (Flip) اسپرایت‌ها و انیمیشن‌ها Flipping Sprites and Animations

• افزودن قابلیت بالا رفتن از نردبان و جابجایی دوربین Adding Ability to Climb Ladders and Camera Shifting

• مدیریت توابع Pre/Post Solve Contact - تایل‌های عبوری Handling Pre/Post Solve Contact Functionality - Pass-Through Tiles

• ساخت کلاس Lua برای بازیکن و پاک‌سازی اسکریپت‌ها Creating the Lua Player Class and Some Script Cleanup

• ورود به مبحث Coroutineها در Lua Getting into Coroutines in Lua

• زمان‌بند Coroutine چیست؟ What is a Coroutine Scheduler?

• رفع مشکل Texture Bleeding با Texel Padding Fixing Texture Bleeding with Texel Padding

• ساخت کلاس Lua برای زمان‌بند Coroutine Creating the Coroutine Scheduler Lua Class

• افزودن کلاس Lua برای آیتم‌های قابل جمع‌آوری (Pickup) Adding the Pickup Lua Class

• به‌کارگیری Pickupها در عمل Pickups in Action

• افزودن UIComponent Adding the UIComponent

• ساخت Camera Context و رندرینگ رابط کاربری (UI) Creating the Camera Context and Rendering UI

• افزودن چرخش‌ها و مقیاس‌بندی‌های صحیح Adding Correct Rotations and Scaling

• شروع کلاس Lua برای GuiBase Starting the GuiBase Lua Class

• تست کلاس‌های فرزند GUI - لیبل‌ها، دکمه‌ها و غیره Testing Gui Child Classes - Labels, Buttons, etc

• شروع HUD (نمایشگر اطلاعات روی صفحه) Starting the HUD (Heads Up Display)

• رویدادها و ساخت Event Manager Events and Creating the Event Manager

• رویدادها در عمل Events in Action

• راه حل چالش OnHealthChangedEvent OnHealthChangedEvent Challenge Solution

• ورود به مباحث Stateها، State Stack و ماشین‌های وضعیت Getting Into States, State Stack, and State Machines

• ساخت GameState Creating the GameState

تکنیک‌های پیشرفته رندرینگ Advanced Rendering Techniques

• ورود به Framebufferها: (در دست بررسی) Getting into Framebuffers: TBD

• افزودن Post-Processing به بازی‌ها! Adding PostProcessing to our Games!

• چالش: ساخت سیستم رندر و سیستم رندر UI Challenge - Create Render System and Render UI System

• چالش: ساخت دستورات رندر برای لایه‌بندی کنترل‌شده‌تر Challenge - Create Render Commands for More Controlled Layering

گام‌های بعدی Next Steps

• از اینجا به کجا می‌رویم؟ Where do we go from here?

• تبدیل از WASM به اپلیکیشن Native C++ From WASM to Native C++ Application