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