ADAMA SCIENCE AND TECHNOLOGY UNIVERSITY

ADAMA, ETHIOPIA
SCHOOL OF ELECTRICAL ENGINEERING AND COMPUTING
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

V YEAR
Academic Year: 2020-21

COURSE OUTLINE

CSE 5304 Computer Games and Animation, Major Elective …………………………… 3(2-0-3)
Prerequisite: None
Target is to acquire fundamentals in game design and 3D animation including modelling of geometries,
textures, lighting, perspectives, camera modelling, motion and particle dynamics. Underlying physical
concepts and their practical implementation will be explained and exercised in laboratory examples based
on a 3D game engine environment. Example models will include still objects, animated bodies and
characters.
Course Description:
Course Title Computer Games and Animation
Operation
Course Credits 3
Period
Class Schedule Code CSE 5304

Target
Students’ Target Grade 5th Year
Major
Capacity
Prerequisite(s)
None (Maximum
for enrollment
Number)

Week, [Start time] –

Instructor Name Dr. Akey Sungheetha Office Hour
[End time]
Information
Mobile E-Mail
TA Name E-Mail
Contact
Name
person
Course Team Artificial Intelligence
or SIG Focus Internet of Things Weekly
areas Multimedia programs
Machine Learning

Learning Upon completion of this course, students should be able to:

 o Discover the knowledge on Fundamentals in game design.
o Construct procedures based on both theoretical and practical approaches in 3D
animation including modeling of geometries, textures, lighting, perspectives,
outcome camera modeling, and motion and particle dynamics.
o Build underlying physical concepts and their practical implementation based on a
3D game engine environment.
o To implement models including still objects, animated bodies and characters.
The purpose of this course is to understand the various concepts of game and 3D
animation. The focus is on firm theoretical background of game design and
Course development. The purpose of course shall be used to motivate students for real time
Description GPU based high end game development using available open source and commercial
game design libraries, familiarities with latest hardware and software used in game
industry.
 Multimedia development, Video Processing (scalable multi-view coding)
 Audio processing
Related  Artificial intelligence
research areas  Game theory
 Utility theory
 Decision theory
Major topics Course Outline:
Fundamentals in game design
1. Design elements
Chapter 1 2. Video game terms
3. Development process
4. Issues
3D animation including modelling of geometries
5. Rendering (computer graphics)
6. Wire-frame model
Chapter 2 7. Scanline rendering
8. Radiosity (computer graphics)
9. Subsurface scattering
10. Shadow mapping
11. High-dynamic-range rendering
Textures
Chapter 3
12. Texture mapping
Lighting
Chapter 4
13. Computer graphics lighting
Perspectives
14. Perspective correctness
Chapter 5 15. Perspective projection
16. 3D projection
17. Orthographic projection
Camera modelling
18. 3D modeling
Chapter 6
19. Pinhole camera model
20. Virtual camera system
Motion and particle dynamics
21. Motion detection
Chapter 7
22. Motion blur
23. Particle system
 Mid Exam

Underlying physical concepts

24. Graphics processing unit,
25. OpenGL
26. Output interfaces
27. Game physics
28. Game engine
Chapter 8
29. Components
30. Game engines as an industry
31. Game middleware
32. 3 Dimensional game development
33. 3D game pipeline
34. Cloud gaming
35. Video game console
Practical implementation based on a 3D game engine
Chapter 9
environment
Example practical implementation based on models including
still objects
36. Objects as Sprite (computer graphics)
Chapter 10 37. A Computer Animated Hand
38. Skeletal animation
39. Computer facial animation
40. Haptic technology
Chapter 11 Animated bodies and characters
41. Shading and coloring- Cel shading
Chapter 12 42. Surface shading algorithms
43. Multimedia Futures
Final Exam
Parameter Weight Remark
Quiz 10 10-15%
Group Assignment 5 5-10%
Lab 10 10-15% Attendance less than 75% leads to No
Assessment
Project 10 10-15% Grade
Mid exam 25 20-25%
Final exam 40 35-40%
Total 100 %
1. Introduction to Computer Graphics, Version 1.2, January 2018, David J. Eck
Course
2. Game Graphics Programming, Allen Sherrod, © 2008 Course Technology, A
Textbook
Part of Cengage Learning.
Related Fundamentals in game design http://math.hws.edu/graphicsbook,
http://160592857366.free.fr/joe/ebooks/ShareData/Game%20Graphics%20Programming%20By%20Allen
references %20Sherrod.pdf, https://www.geeksforgeeks.org/how-to-get-started-with-game-development/
3D animation including modelling of geometries, textures, lighting, perspectives, camera modelling, motion
and particle dynamics. https://www.schoolofmotion.com/blog/3d-motion-design-glossary
http://math.hws.edu/eck/cs424/downloads/graphicsbook-linked.pdf
Underlying physical concepts and their practical implementation based on a 3D game engine environment.
https://www.ukessays.com/essays/computer-science/concepts-features-game-engines-6438.php
https://www.engpaper.com/3d-game.htm
softwares http://graphics.ucdenver.edu/5920/ ,
https://www.worldofleveldesign.com/categories/level_design_tutorials/recommended-game-engines.php
Example practical implementation based on models including still objects, animated bodies and characters.
https://www.gamasutra.com/view/news/342457/The_12_principles_of_animation_in_video_games.php
Shading and coloring https://blog.prototypr.io/color-cycling-in-pixel-art-c8f20e61b4c4
https://www.gamasutra.com/blogs/HermanTulleken/20150729/249761/Color_in_games_An_indepth_look_at
 _one_of_game_designs_most_useful_tools.php

Laboratory Exercises
1. Study on Interactive animations and games https://curriculum.code.org/csd-
19/unit3/code/ and https://code.org/educate/gamelab
2. Drawing in Game Lab
 fill(color)
a) Draw a square bullseye using four colors from an array.
b) Use the draw() function to animate a circle through multiple shades of red.
c) Sets the fill color to cyan.
d) Demonstrate the two ways to specify the color parameter.
 ellipse(x, y, w, h)
a) Draw two ellipses at the same location but with different stroke widths and no fill
color.
b) Change the thickness of a ellipse outline, filled in green, drawn in the upper left
corner of the display.
c) Use the draw() function to animate an oscillating ellipse.
d) Draw a 100x100 pixel ellipse (circle) in the center of the display.
e) Change the color of the ellipse outline drawn in the center of the display.
 rect(x, y, w, h)
a) Thick Outline: Change the thickness of the rectangle outline.
b) Two Rectangles: Draw two rectangles at the same location and with the same width
and height but with different stroke widths and no fill color. Draw two rectangles at the
same location and with the same width and height but with different stroke widths and
no fill color.
c) Part of a Rectangle: Start a large rectangle off the display so that only part of the
rectangle is visible.
d) Animated Box: Use the draw() function to animate a moving and growing box.
3. Shapes and Randomization
 background(color)
a) Draw a blue background
b) Changing the Background Color: Use the mouse pointer position to change
the color of the background.
c) RGB Colors: Using the rgb block, create a background using RGB colors.

 ellipse(x, y, w, h)
a) Two Ellipses: Draw two ellipses at the same location but with different stroke
widths and no fill color.
b) Quarter of an Ellipse: Change the thickness of a ellipse outline, filled in green,
drawn in the upper left corner of the display.
c) Animated Ellipse: Use the draw() function to animate an oscillating ellipse.
 rect(x, y, w, h) refer ex 2.
 randomNumber()
a) Generates a random number in the range 5 to 20 (inclusive).
b) Random Walk Do a "random walk" of 4 steps, turning a random number of degrees
after each step.
c) Clouds Draw a cloud mass using randomly sized dots at random locations near each
other.
4. Variables
 Declare and assign a value to a variable
a) Pioneering computer scientist and first African American to earn a Ph.D. in
computer science.
b) Unbeatable Coin Flip Generate a random 1 or 2, and always win because of
carefully worded messages.
 Declare a variable
a) Pioneering computer scientist.
b) Count Sixes Count the number of sixes rolled in 5 random die rolls.
c) Simple Average Average three tempertatures prompted from the user.
5. Sprites
 drawSprites(group)
a) Spinning Square: Animate a spinning square using the draw loop, background,
and drawSprites commands.
 var sprite = createSprite(x, y, width, height)
a) Red Stripe: A later sprite overwrites and earlier sprite.
b) Make Some Stickers: Using 26 different images for stickers, use
randomNumber to pick twenty different stickers randomly, and use
randomNumber again to pick random places for each sticker.
 sprite.scale
a) Different Sized Pinwheels: Animate three different sized pinwheels.
6. The Draw Loop
 function draw() { }
a) TV Static Line: Animate a line like on a broken old television.
b) Mouse-Controlled Dots: Draw random sized dots where the mouse is clicked.
 World.frameRate
a) Accelerate a square across the screen.
7. Booleans and Conditionals
 If statement
a) Prompts the user for the number of hours they worked and tells them if they
worked overtime.
b) Guess My Number Prompts the user to guess a secret number between 1 and
10.
c) Time Waster Five clicks and you are done.
 Equality operator
a) Basic numeric equality check.
b) "Alan Turing" equals "ALAN TURING"? Basic string equality check. Case
matters for string comparison.
c) 5 equals "5"? Numeric string to number conversion is automatic in App Lab.
d) equals "five"? Word string to number conversion is not automatic in App Lab.
 Inequality operator
a) Basic numeric inequality check.
 b) "Alan Turing" inequals "ALAN TURING"? Basic string inequality check. Case matters
for string comparison.
c) 5 equals "5"? Numeric string to number conversion is automatic in App Lab.
d) 5 equals "five"? Word string to number conversion is not automatic in App Lab.
 Greater than operator
a) Basic numeric greater than check.
b) Comparing "apples" the "Apples" Basic string greater than check. Case matters for
string comparison.
c) 2 is greater than "12"? Numeric string to number conversion is automatic in App Lab.
 Greater than or equal operator
a) Basic numeric greater than or equal to check.
b) Comparing "apples" the "Apples" Basic string greater than or equal to check. Case
matters for string comparison.
 Less than operator
a) Basic numeric less than check.
b) Comparing "apples" the "Apples" Basic string less than check. Case matters for
string comparison.
c) 2 is less than "12"? Numeric string to number conversion is automatic in App Lab.
 Less than or equal operator
a) Basic numeric less than or equal to check.
b) Comparing "apples" the "Apples" Basic string less than or equal to check. Case
matters for string comparison.
8. Conditionals and User Input
 keyDown(code)
a) Rotary Phone: A rotary phone dialer controlled by the keys 0 through 9.
b) Driving: Drive a square using the UP DOWN LEFT RIGHT keys.
9. Other Forms of Input
 keyWentDown(code)
a) Click Counter: Simple click counter using keyWentDown().
 keyWentUp(code)
a) Falling Star: Drop a star when the space bar is released.
 mouseDidMove()
a) Keep the sprite up by moving the mouse over the sprite.
 mouseDown(button)
a) Pencil Drawing: Simple pencil drawing with mouseDown().
 mouseWentDown(button)
a) Black and White: Change the background by clicking a mouse button.
 mouseWentUp(button)
a) Move to the Mouse: Have the sprite move in the direction of the mouse when
button was released.
 sprite.visible
a) Blinking Target: Use sprite.visible to make a target blink.
b) Peek-A-Boo: Three gnomes playing peek-a-boo, the start of a whack-a-gnome
game.
 If/else statement
a) Prompts the user for the number of hours they worked and tells them if they
worked overtime or not.
b) Even or Odd Determines if a random number is even or odd.
 c) Letter Grade Prompt the user for an exam score and assign a letter grade.
10. Velocity
 sprite.rotationSpeed
a) Faster and Faster: Make the sprite spin faster and faster when the mouse
moves.
 sprite.velocityX
a) Vibration: Make a sprite vibrate by alternating velocityX positive and
negative.
 sprite.velocityY
a) Zig-Zag: Move a sprite in a zig-zag pattern by alternating velocityY positive
and negative.
11. Collision Detection
 sprite.isTouching(target)
a) Going for Gold: Will a randomly started sprite eventually touch a random
static sprite?
 sprite.debug
a) Return debug state of the sprite, true or false.
12. Collisions
 sprite.bounce(target)
a) Four Collisions: Demonstrate all four types of collisions.
b) Shuffleboard: Use the arrow keys to move the disc at the bottom. Use the
space bar to release the disc.
 sprite.bounceOff(target)
a) Breakout: Keep the apple in the air by moving the paddle with the left and
right arrows.
b) Four Collisions: Demonstrate all four types of collisions.
 sprite.collide(target)
a) Four Collisions: Demonstrate all four types of collisions.
 sprite.displace(target)
a) Four Collisions: Demonstrate all four types of collisions.
b) Umbrella: The umbrella displaces the raindrops.
 setCollider(type, xOffset, yOffset, width/radius, height, rotationOffset)
a) Sets the collider for a sprite.
 sprite.bounciness
a) My Three Bounces: Demonstrate three different bounciness levels.
13. Functions
 Define a function
a) Call functions to draw a dotted line of two dashes.
b) Figure Eight: Call functions to draw a figure eight using two squares.
c) Flip a coin: Define a function that uses randomNumber(1) to randomly
generate a one (heads) or zero (tails) and return the appropriate word.
 Call a function
a) Call function to draw a long line.
b) Big Box Call functions to draw a big box.
c) Big Box (Improved) Call functions to draw a big box. This is improved because it
abstracts the box as two "left angles" and creates a new function that reduces
repeated statements.
 d) Roll Two Die Call functions that use randomNumber(1,6) to simulate rolling two die
and summing the results.

Sample tools used for Gaming and Animation

1. Python
2. Unity
3. Game Play https://code.org/educate/gamelab
4. Blender