Computer Science 486 Mobile and Internet Game Development

Study Guide :: Unit 8

Create and Animate 2D Graphics

Overview

Unit 8 covers two good JavaScript graphics and animation rendering libraries: three.js and pixi.js. Both libraries support WebGL (Web Graphics Library) and can help developers implement interactive graphics within compatible web browsers. They are also inspiring the creation of physics and game engines, which the next unit will cover.

Learning Objectives

After completing this unit, you will be able to:

• Create a scene with a perspective camera.
• Create a moving cube in the virtual world.
• Draw a line in the virtual world with render, scene, and camera.
• Create a parallax scrolling effect as the kernel of a side-scrolling game.

Learning Activities

• First, read Unit 8 notes.
• Second, read the Unit Exercise below in this unit:
  • Choose any exercise and try to complete it.
  • Use the course Discussion Board to post your experience and solution to any one of the exercises.
  • Comment and make suggestions on another student’s posting.
  • Answer any questions posed to you.

Lesson Notes

1. To develop a browser-based game with HTML and JavaScript, 2D and 3D graphics and animation rendering is extremely important. WebGL (Web Graphics Library) allows developers to use an application program interface (API) based on OpenGL to do rendering in HTML <canvas> in browsers. Read 20 Amazing Examples of WebGL in Action (https://www.creativebloq.com/3d/30-amazing-examples-webgl-action-6142954) to get better idea of what WebGL can do.

2. Since writing WebGL from scratch is pain and there are many similar tasks that all WebGL applications must do, some libraries like three.js has helped to abstract the details and provide a higher-level API library. The use of three.js allows you to do animation quickly.

   Let’s try to create a scene in which a cube is inside and rotating to let users see the animation from different angles. Please read Creating a Scene (https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene) and practise.

3. Besides three.js, another popular JavaScript renderer is Pixi.js. Pixi.js is a fast and lightweight 2D library. You may view at it at https://pixijs.download/release/docs/index.html and download examples from https://github.com/kittykatattack/learningPixi. Remember to put the examples at the root folder of your web server at your local machine and use a web browser to access “https://locahost/[the folder of the downloaded examples]/examples/[particular.html]” to see how Pixi.js works and correspondent source code.
4. You may also go to https://pixijs.io/examples/#/demos-basic/container.js, where you can click the recommended examples to see and modify the codes directly in the editor at bottom of the web page. The recommended examples include:
   1. Basics à Basics, Click, Text, SpriteSheet Animation
   2. Demo à Texture Rotate, Text, Interactivity, Dragging
   3. Display à Z-Order
5. Now you have better idea of how and what Pixi.js can do. Please read Building a Parallax Scroller with Pixi.js, a four-part article starting from https://github.com/ccaleb/pixi-parallax-scroller to build your first Parallax Scroller game skeleton.

Unit Exercise

1. Based on the Parallax Scroller game skeleton you created, can you make the coming scenes more unexpected (i.e., generated randomly)?
2. Try to add an avatar such as a walking person or a small airplane to the scene and allow the player to control its position.
3. Try making the scene move to the left when the player presses the RIGHT arrow key or the D key (WASD for up, left, down, and right).
4. Try to randomly add some fast-moving objects (like bullets) from right to left. The bullets should move faster than the movement of scenes (e.g., building) and should keep moving even when the avatar is still (if you are doing this exercise based on Exercise 3 above).