Casual Game Development
IGME-450
Course Topics and Learning Outcomes
Course Outline by Topic
- Casual Games Overview
- Definition
- Game & Story Genres
- Primary Action
- Control and Usability
- Social Features
- HTML and CSS Review
- HTML tags
- CSS properties esp. margin and padding
- CSS selectors
- CSS colors (also needed for canvas API)
- Browser DOM
- window object
- document object
- DOMElement class
- document.querySelector(), document.querySelectorAll()
- document.getElementsByTagName(), document.getElementById()
- element.innerHTML, element.appendChild(), element.getAttribute(), element.setAttribute()
- element.style.x, element.className
- Built-in helper classes: Math(), Date() ...
- More HTML/CSS
- Web Fonts (also needed for Canvas API)
- Building Game Screens
- HTML/CSS for Mobile
- Basic JS
- Declaring Variables/Scope
- Data types
- Writing functions
- Events and Event handlers
- Arrays
- Objects
- More JS
- "use strict"
- Anonymous Functions
- Immediately-invoked function expression ("iffy")
- Closures
- Block-level Scope/Hoisting
- OOP JS
- Object Literals
- Function "Singletons"
- Function Constructors
- JS Modules
- HTML5 Canvas 2D API
- Getting a pointer to 2D context - canvasElement.getContext("2d")
- Canvas drawing state attributes - strokeStyle, fillStyle, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign,textBaseline, globalAlpha, globalCompositeOperation
- Rectangles - clearRect(), strokeRect(),fillRect() in conjunction with applicable state attributes
- Text - fillText(), strokeText(), measureText() in conjunction with applicable state attributes
- Image drawing - drawImage(), createPattern()
- Drawing state stack management - save(), restore()
- Transformation methods - scale(), rotate(), translate(), transform(), setTransform()
- Transformation concepts - matrix, identity
- Compositing modes - set with globalCompositeOperation, possible values include: source-over, source-in, source-out and others
- Gradients - createRadialGradient(), createLinearGradient()
- Pixel Manipulation - createImageData(), getImageData(), putImageData(), canvas.toDataURL()
- Paths - beginPath(), closePath(), fill(), stroke(), clip(), moveTo(), lineTo(), quadraticCurveTo(), bezierCurveTo(), arcTo(), arc(), rect(), isPointInPath()
- Game play & Interactivity:
- Polling Keyboard/Keyboard Events
- Accessing Mouse Position
- Touch/Gesture
- Collision Detection
- Game Physics with Box2D
- More Open Web Platform APIs
- Timers and requestAnimationFrame
- XHR(XMLHttpRequest) for loading local data
- <audio> for sound
- <video> (demo only)
- Web Audio API (demo only)
- Three.JS
- Setting up a Scene
- Geometry and Mesh Objects
- Lights
- Text
- Particles
- Animation and Physics