Goal: - In teams of 1, 2, or 3 students, create an application utilizing either
- Canvas to build a 2D game
OR
- Three.js to build a 3D Game or Interactive Experience
Milestones
- Team and idea and "one pager" due start of class Friday 5/1 (week 13) - see mycourses discussion threads
- Working Prototype-I due start of class Wednesday 5/6 in dropbox (week 14)
- Working Prototype-II due start of class Wednesday 5/13 in dropbox (week 15)
- Final Version Due Monday 5/18 at 12:30PM (section 01) OR Wednesday 5/20 at 12:30 PM (section 02). These are at the scheduled final exam times, and you will be presenting your final version at this time.
Requirements and Grade Rubric for 2D Canvas Game
These are the same as project 2, except that the overall expectations are higher.
Also, if you are building on a previously created game, you will only receive credit for the improvements you make.
All partners must make substantial contributions to the final product. -10% off of final project grade (each) if initial proposal and prototypes are not submitted on time.
Requirements and Grade Rubric for 3D Three.js Interactive Experience/Game
Utilizing the Three.js API, students will build a compelling interactive experience (or game).
- 15% - Media Requirements:
- Sound:
- A background sound that loops.
- At least 1 effect sound.
- DO NOT use the sounds that were given to you in class.
- Images:
- Consistent theme or style
- Optimized bitmap Graphics:
- Smaller dimensioned graphics can be PNG
- Larger graphics are likely JPG
- 30% - Interaction Requirements:
- Camera Control
- The user should be able to control the position of at least one camera - this will likely be done with keyboard controls. Consider pairing an avatar with the camera. If so, the camera should move to follow the user's avatar.
- Control should be responsive and intuitive.
- Constrain the camera to certain positions - for example, don't let it go "below" the world (except in an optional "god mode")
- Add a means to reset the camera to the starting position.
- Widgets
- Have at least 3 additional controls that allow the user to change aspects of the world such as lighting, default camera, positions or speeds or opacity of objects, and so on.
- You can use either the
dat.gui
library from the book - or regular HTML controls.
- 3D Object Interactions
- The user should be able to select at least two different objects in the world with the mouse.
- The selected object should react and give feedback to the user by changing its appearance in some way.
- Selecting an object will cause a change in its behavior in some way (stop moving, speed up/slow down, ...)
- 15% - Usability Requirements:
- Teaching: The player should have no trouble figuring out the theme of your world, how to explore it, and what the various controls do. You must provide textual instructions. Hint: You can create a 2D plane and put a texture of instructions on it, and then use 'h' as the keyboard shortcut (
onkeyup
) to show/hide the instructions.
- Feedback: The player should intuitively know how to navigate your world and shouldn't get "stuck" anywhere.
- If your world is a game: strive to meet the game design requirements from project 1.
- 30% - 3D Environment:
- Use a wide variety of built-in geometries in your world (planes, spheres, cubes, cylinders, toruses, ...)
- Utilize at least 3 textures
- Light your world appropriately to match its theme. You will probably want to enable shadows.
- If desired, use fog and other effects like lens flare.
- Create at least one customized geometry - you can do this manually (see examples 4 & 5 from chapter 2), or by importing a 3D model (see chapter 8 code)
- At least 3 objects in your world should continuously animate or move in some way.
- 10% - OOP and Coding Standards:
- Code runs with no errors
"use strict";
at the top of every JS file
- Program like an adult and use at least some of these practices: JS Module Pattern, Function Constructors, Object Literals, Object Delegation, code split into multiple files, ES6 classes, and so on.
- ** Comment every method you write **
- Delete or comment out your
console.log()
calls
- You will only receive credit for code that you write beyond what you've inherited from the book and in-class exercises.
Extras
- There are plenty of opportunities for extras in an open-ended project like this:
- A second camera and a way to switch between them.
- ???
- Be sure to document topics you figured out on your own (the ones we didn't cover in class).
Rubric
- Good (Meet all requirements above reasonably well) = 90%
- Better (Go beyond expectations in 2 or more areas) = 95%
- Best (Go significantly beyond expectations in 2 or more areas) = 100%
- Wow! = 101%+
Documentation (-10% if not done)
- Document what changes were made in your game from your original design..
- Document exactly how you met the 5 categories of requirements, and be specific about any extras you did.
- Document any non-course resources (libraries, sounds, images, tutorials, sample code, 3D models) you utilized.
- Document which team member worked on each part of the project.
- Document your extras, and be sure to take credit for any media (images, sound, 3D models) you created.
Working Prototype (-10% each if not done)
Create a working prototype that illustrates the core mechanic of your game/experience. See dropboxes for due date.
Final Submission
- ZIP up and post to dropbox before due date. This is worth 20% of final grade.
- Post the documentation into the dropbox.