Instructor: Bruce Donald Campbell
Faculty, Continuing Education - RISD
Adjunct Professor, Brown, Computer Science (research)

Email: bcampbel01@risd.edu

Prerequisites: None

DESCRIPTION

Art meets mathematics when you combine visual and technical approaches to create game elements using Blender, a free, open source 3D modeling tool. Through object-making exercises, Blender fundamentals are explained and put to use. The course covers viewport and navigation, interface management, select and transform, vertex, edge and face refinement of model sub-objects, and illustration for object aesthetics for use in a 3D game concept. You'll be able to export your game components to be presented in any web browser, and can then use them for future integration into online games. Join us for this compelling course, where the logical mind and the creative mind converge.

RESOURCES

CLASS LINKS

1. WebGL Home Page
2. three.js Home Page
3. Blender YouTube Video Series
4. VRML Example
5. Saving A 3-D Animation in Blender

TECHNOLOGY REQUIRED

• Blender (https://www.blender.org/)
  
• Brackets Text Editor (http://brackets.io/)
  
• a modern web browser (Chrome or Firefox recommended)

SYLLABUS

By the end of this topic you will: 

• have been introduced to HTML as the model language for Web games in 2-D and 3-D.
• have been introduced to CSS as the view presentation language for Web games in 2-D and 3-D
• have been introduce to JavaScript as the controller language for Web games in 2-D and 3-D

Readings/Materials/Videos:

Explore the three.js home page to get a sense of how 3-D objects are integrated with web games
Get a sense of WebGL as the prominent graphics library for web graphics.
Read about what is 3-D modeling and what is it good for.

Video 1: Thoughts on creating video games:

Video 2: Understanding model, view, and controller roles:

Video 3: Let's write some model, view, and controller code:

By the end of this topic you will: 

• have been introduced to Blender software and 3-D object modeling in general
• explore the Blender viewport and physics of navigation
• become adept at manipulating the viewport to gain a comfortable interaction technique

Readings/Materials:

Consider using gITF export for game integration (if you want to dive in now, see the glTF home page). 
Consider using an OBJ loader in three.js.

Bookmark this useful Blender YouTube Series at:
www.youtube.com/playlist?list=PLa1F2ddGya_-UvuAqHAksYnB0qL9yWDO6

Video 1: Introduction to Web games:

Video 2: Setting up a Local Web Server for Testing a Composition:

Video 3: Investigating and Editing 3-D models with Blender:

By the end of this topic you will: 

• be comfortable at injecting models into a 3-D online code base.
• be comfortable manipulating objects with mouse control.
• be comfortable manipulating objects with keyboard control.

Video 1: Understanding a Scene Graph as Convenience for Composition Coding:

Video 2: Adding Keyboard and Mouse Interaction to a Scene Composition:

Video 3: Investigating the Frame Loop that Manages a Scene Animation:

By the end of this topic you will: 

• understand how the HTML5 event model works in providing game interaction.
• go an iteration deeper in looking at frame loops as the coordinator of animation.
• have gained more confidence in understanding the Slant game code used throughout this course.

Video 1: Refining Mouse Interactivity in a Web Game:

Building Action in the Frame Loop of your Game:

Video 3: A descriptive look at the component code for the game of Slant:

By the end of this topic you will: 

• have an appreciation for texturing 3-D objects for game use,
• have explored a simplified use of Three.js in a game development exercise,
• have thought through how to use arrays and collections for any game's complexity.

Video 1: Texturing a Game Object within Blender

Video 2: Explore a Simplified Use of Three.js in a 3-D Web Game:

Video 3: Using Arrays and Collections for Game Complexity:

By the end of this topic, you will:

• understand how collections help scale up visual complexity in Web games.
• understand how arrays help manage variables efficiently
• have integrated effective collections into your 3-D Web game code.

Video 1: Integrating more Game Elements through Arrays and Frameloop Code:

Video 2: Adding a second player to a Video Game with HTML, CSS, and JavaScript:

Video 3: Adding an Automaton to a Video Game for Artificial Intelligence:

In this topic, you learn how to add more exotic features to your game

By the end of this topic you will: 

• understand how to write good animation code
• understand how to add audio for player feedback and game mood
• understand how to code physics in a frame loop
• understand the power of artificial intelligence for game play

Videos:

Video 1: Adding new design components via model, view, and controller code:

Video 2: Adding audio and physics to your game:

Video 3: Game states and adding intelligence to your game:

Homework/Assignments:

• See an example of sound effects: background, event, and location.
• See an example of physics in action.
• Here's two examples of artificial intelligence in action: the life automata and a computer automata example
  
• Work on your own game concept if you feel comfortable (otherwise work with the examples from the project gallery of final game concepts)

In this topic, we review the whole process of 3-D web game creation, with a focus on 3-D objects and how they integrate into a game engine.

By the end of this week, you will:

• have created a final 3-D model and exported it as an object to be used in a web game.
• have participated in the final critique and object integration activity
• have played around with a procedural modeling script
• worked with a pipeline of procedural generation to handcrafted modification
• have gained a roadmap as to where to turn next to build upon the skills learned in this class

Readings/Materials/Videos:

Video 1: Using Integrated Python Scripting in Blender to Generate Geometry:

Video 2: Thoughts on Connecting the Virtual World with the Physical during Blender Modeling:

Video 3: Preparing for our final critique:

Video 4: Final Projects in Summer 2020 3-D Game Design and Composition Courses:

Homework/Assignments:

• Perform the final homework assignment as described in the third video above

EXAMPLE STUDENT PROJECTS:

Alan (Giraffe Maze)
Emma (Kitty Yarn)
Michelle (Here Be Dragons)
Maliha (The Donut Monster)
Marisa (Gameboy Gardening)
Kate (Shark Attack!)
Nora and James (Jet Cloud Fighter)
Summer Camp 2020 (Donut Madness)
Shamus (Ducky Fun)
Tarun (Asteroid Sim)
Tiffany (Candyland Math)
Xinyu (Bird Escape)
Yang (Bunny Fun)