Course Details

Image

Course Introduction 課程簡介

很多人都喜歡玩電腦遊戲,但沒有很多人想過製作遊戲。 但原來製作遊戲本身所帶來的滿足感及快樂,卻可能比玩遊戲更甚。以往製作遊戲要配合遊戲引擎(Game Engine)及學習C++或Java等要求較高的程式語言,入門的門檻較高。但隨著HTML5的技術越來越進步,再配合開放的原始碼的Game Engine,學習遊戲製作已不是想像中那麼困難。利用HTML5 Canvas 和Javascript等基本網絡程式語言,再配合CreateJS 和 Cocos2D-JS兩大遊戲引擎,已能製作出很多有趣的遊戲。透過學習遊戲製作過程,更可精進網頁及程式編寫能力,實作是相得益彰。

Course Duration 課程時數

24 hrs

Course Objective 課程目標

本課程目的是培訓學員掌握 HTML5 Canvas及兩大遊戲引擎 ,讓學員能設計出有趣的網上及手機遊戲程式。

Entry Requirement 入學要求

報讀者無需任何程式設計背景,但對網頁遊戲程式設計及各種新技術有興趣請便可報讀

Course Features 課程特點

★解說詳細:循序漸進說明 HTML5 Canvas+JavaScript+CreateJS+Cocos2D-JS技術。
★即時實習:即時輸入程式碼實習,可立刻驗證結果。
★多元學習:了解不同技術的配搭,建構出理想的網頁效果。

Course Content 課程內容

JavaScript Basics
  • JavaScript Basics and Functions
  • JavaScript Variables and Arrays data structure
  • JavaScript If-Else and Looping control structure
HTML5 Canvas
  • Introducing HTML5 canvas element
  • Basic Drawing and Image handling in Canvas
  • Mouse and Keyboard interaction with Canvas
  • Build a game loop using Canvas's animation loop
  • Sprite sheet animation
Rendering Sprite
  • Installing game engines (CreateJS and Cocos2D-JS)
  • Sprites and their main properties
  • Adding sprites to the scene
  • Making sprites moving and flipping
  • Creating spritesheets and using sprite batch node
Starting the Action
  • Touch screen handling
  • Detecting collisions between 2 sprites
  • Using states to control objects and game life cycle
  • Using device orientation to control the game
Rendering Text
  • Adding text to the game
  • Creating and using Bitmap fonts
  • Using actions to create text effects
Animations and Particle Systems
  • Frame-based anmiation
  • Animating objects by changing their properties over time using actions
  • Using predefined particle systems
Adding Sound Effects and Music
  • Playing sound effects
  • Playing music and background sounds
  • Adding sound effects and preloading them
User interface and Navigation
  • Creating scenes and navigating between them using transitions
  • Adding buttons and handling events when a player taps them
  • Using text field to get the user input
Physics
  • Creating a physics node and physics bodies
  • Using physics bodies properties
  • Handling and filtering collisions
  • Applying forces and impules
Packaging for iPhone and Android
  • Converting the game using PhoneGap
  • Deploying to Google Play
  • Deploying to Apple Apps Store

Shooting Ball

Space Shooter

Navigation

Social Media

IT Design