课程介绍

Typescript、Babylon JS和Colyseus JS创建单人和多人在线网页游戏，包括移动设计

你将会学到的

用于 2D 和 3D 网络视频游戏开发的 Babylon JS 框架

用于在线多人视频游戏开发的 Colyseus JS 框架

发现 3D 引擎的基本组件（材质、纹理、交互系统等）

两个完整的 2.5D 和 3D 项目（捉迷藏、熊猫爱你）

学习在线视频游戏开发的良好做法和技巧

使用 BabylonJS 学习用于计算机和移动设备的响应式设计方法

构建视频游戏的理论和实践方法

探索用 Typescript 制作完整网络视频游戏的编码实践

使用或不使用 BabylonJS 编辑器创建项目

独立游戏开发项目制作的初步见解

要求

Javascript 或 Typescript 所需的基本编程经验

电子游戏设计不需要特定的知识

能够运行 BabylonJS 5.0 的计算机

导入包的 Internet 访问

说明

欢迎来到我的 Babylon JS 课程，您将在其中学习创建 2D 和 3D 网络游戏所需的一切知识，包括单人和本地多人游戏开发、使用 TypeScript 和 BabylonJS 实现图形和游戏功能，以及使用 ColyseusJS 实现在线多人游戏部分

课程分为三个主要部分

在第一部分，我们将提供 BabylonJS 作为 3D Web 引擎的快速理论概述。这将包括其特性、功能和限制。您将了解该框架的主要类和组件

在第二部分中，我们将通过创建一个名为“捉迷藏”的 2.5D 游戏来测试我们的新技能。该游戏将采用移动响应设计原则和本地多人游戏方式，允许玩家合作赢得胜利。您将获得创建具有适当架构和令人满意的图形的 2D 和 2.5D 游戏的技巧和编码实践

在课程的最后一部分，我们将通过创建名为“Pandas Love You”的第一人称射击游戏来探索 3D 在线多人游戏开发的世界。使用 ColyseusJS 处理在线多人游戏部分，我们将使用 BabylonJS 编辑器创建一个环境并使用这个特定工具发现编码实践

请务必注意，本课程不涵盖以下主题：

深度性能优化

营销

沟通策略

图形资产创建

声音资产创建

但是，您将从编码的角度理解和学习创建高质量游戏的基本技能，以及如何找到合适的资产资源

最后，我想强调的是，项目中使用的所有资产都可以免费使用，只要引用创作者并满足各自许可的所有条件即可。我真的很想鼓励在游戏开发社区中使用免费资源和有才华的创作者的支持

无论您是初学者还是经验丰富的游戏开发者，本课程旨在帮助您掌握使用 BabylonJS 和 ColyseusJS 创建网页游戏的艺术。到课程结束时，您将掌握将您的游戏开发事业提升到一个新水平所需的技能和知识

那么，让我们开始吧！

此课程面向哪些人：

对视频游戏开发感到好奇的初学者 Typescript 或 Javascript 开发人员

对电子游戏开发充满好奇的学习者

对 Web 3D 引擎好奇的学习者

课程目录

• 1 - Introduction BabylonJS Overview
• 1 - Introduction
• 2 - Presentation of BabylonJS
• 3 - Engine Scene classes
• 4 - Cameras Lights
• 5 - Textures Materials
• 6 - Physics Particle Systems
• 7 - Inputs GUI Asset Management
• -
• 2 - HideSeek Our first 25D Game
• 10 - 0-basicSetup
• 10 - Setup Canvas Window
• 11 - assets
• 11 - Import Assets
• 12 - Architecture Gameloop
• 13 - 2-gameloop-part2
• 13 - Setup Start UI
• 14 - 3-load-scene
• 14 - Finish Start UI
• 15 - Resize Screen Multi Navigator Display
• 16 - 4-Start-screen
• 16 - Main Menu Setup Change Scene
• 17 - Context inside Component Function
• 18 - Helper Functions
• 19 - Main Menu Buttons
• 20 - 5-main-menu-part1
• 20 - Animated Background with SpriteManager
• 21 - Animated Background with SpriteMap
• 22 - Animated Background with SpritePackManager
• 23 - 6-main-menu-part2
• 23 - Animated Player Mesh Part1
• 24 - Animated Player Mesh Part2
• 25 - Follow Camera and Transparency Issues
• 26 - 7-main-menu-animation-part3
• 26 - Solo Menu Title
• 27 - Solo Menu UI
• 28 - 8-solo-menu
• 28 - Game Scene preload
• 29 - Game Scene Environment
• 30 - 9-preload-gamescene
• 30 - Game Scene Environment Integration
• 31 - 10-environment-class
• 31 - Game Scene Skybox
• 32 - Game Scene Particle Effects
• 33 - 11-skybox-fog
• 33 - Game Scene Move Player
• 34 - 12-character-movement
• 34 - Game Scene Animate Player
• 35 - 13-character-animation
• 35 - Invisible Walls
• 36 - 14-character-constraints
• 36 - NPCs Behaviors
• 37 - 15-npc
• 37 - HUD Timer Part 1
• 38 - HUD Rabbit Counter Part 2
• 39 - UI Pause Menu
• 40 - UI Exit Button
• 41 - 16-HUD-and-pause-menu
• 41 - Interaction with NPCs
• 42 - Interaction Feedback
• 43 - 17-interactions-with-rabbits
• 43 - Win Loose Conditions
• 44 - 18-win-lose-menus
• 44 - Local Multiplayer Menu
• 45 - 19-multi-menu
• 45 - Local Multiplayer Views Interactions
• 46 - Local Multiplayer Feedbacks
• 47 - 20-multiplayer-game
• 47 - Sound Class for Musics
• 48 - Sound Class for Sfx
• 49 - 21-audio-inside-game
• 49 - Sounds Options
• 50 - Controls Options
• 51 - 22-options
• 51 - Start Mobile UI
• 52 - Ingame Mobile UI
• 53 - 23-mobile-responsive-mode
• 53 - Release Production
• 54 - Conclusion
• 8 - Presentation of HideSeek
• 9 - Project Setup
• -
• 3 - Pandas Love You 3D Online Multiplayer Shooter Game
• 55 - Presentation of Pandas Love You
• 56 - Presentation of BabylonJS Editor
• 57 - BabylonJS Editor Main Files
• 58 - BabylonJS Editor Scripts
• 59 - 0-Initial-setup.zip
• 59 - Global Architecture of our Project
• 60 - assets.zip
• 60 - Import Assets
• 61 - 1-inital-setup-with-assets.zip
• 61 - Setup Start UI
• 62 - Start UI Change scene
• 63 - Setup Menu UI
• 64 - Menu UI Lobby and Room
• 65 - 3-General-Ui-multiplayer-scene.zip
• 65 - Environment Map Integration
• 66 - 4-Integration-on-scene.zip
• 66 - Setup GameManager Player Enemy classes
• 67 - Import Enemy Mesh
• 68 - Basic AI Enemy Behavior
• 69 - Optimize import with Asset Container
• 70 - Import Player Paws Mesh
• 71 - Enemy Death with new Bounding Box
• 72 - 5-enemies-and-interactions-with-projectile.zip
• 72 - ColyseusJS Presentation
• 73 - ColyseusJS Setup
• 74 - Setup NetworkManager
• 75 - Create Room
• 76 - Join or Create Room
• 77 - Room List
• 78 - 6-Server-setup-and-rooms-lobby.zip
• 78 - Player Instantiation
• 79 - Player Position Synchronization and Interpolation
• 80 - Player Rotation Synchronization
• 81 - Player Projectile Synchronization
• 82 - 7-Players-synchronization.zip
• 82 - Enemy Apparition Synchronization
• 83 - Enemy Killing Synchronization
• 84 - Waves of Enemies Synchronization
• 85 - Master Role
• 86 - Enemy Position Synchronization
• 87 - 8-Enemies-synchronization.zip
• 87 - Killing Players
• 88 - Win Loose Restart
• 89 - 9-enemies-attack-and-win-loose-conditions.zip
• 89 - SoundManager for Musics
• 90 - SoundManager for Loop Sfx
• 91 - Extra Blender Mixamo Setup 3D Model
• 92 - Player Animation States Attack Idle
• 93 - Player Animation Movements
• 94 - 10-players-animations.zip
• 94 - Global Conclusion