Program 4: bringing it all together



Due: by final exam time at 8am
  • For 461: Friday, December 9th
  • For 561: Wednesday, December 14th

Goal: In this assignment you will apply what you've learned of basic WebGL and GLSL ES to build a simple game.

Submission: Submit your assignment using Wolfware Classic. The submit locker is now available. Click on "Submit Assignments" next to "Grade Book".

BASIC GRADING:
The main components of this programming assignment are:
  • 10% Part 0: properly turned in program (new requirements!)
  • 15% Part 1: create the playing field and frog
  • 25% Part 2: add motion to the playing field
  • 25% Part 3: add motion to the frog
  • 25% Part 4: add interaction between frog and field
  • Participation credit: You can receive participation credit (outside of this assignment) for posting your resulting imagery and video, good or bad, on the class forum!

General:
Our suggested game is a 3D version of Frogger. If you are not familiar with the game, you can play it online here, here or here, view some historic gameplay here, and find more information about the game at its Wikipedia entry here. There are also many other sources online.

If you would rather implement a different game, you may do so, providing you obtain instructor's approval before you start. To obtain that approval, send an email to Prof. Watson (and copy our TA) with a short description of your proposed game and begin a dialog. Small teams are also acceptable, but the scope of the project must increase to match. Again, obtain approval from your instructor.

Unlike previous programs, your game is not required to load specific assets (models, textures or lighting). You are free to hard-code paths to the assets your game requires.

You may use any libraries you find, including three.js, to build this game. You may not use code from any other implementation of Frogger you find online.

Part 0: Properly turned in assignment
Remember that 10% of your assignment grade is for correctly submitting your work! For more information about how to correctly submit, see this page on the class website. Since we encourage variation in your games, make sure to include a readme.md file.

Unless you request us not to, we will be hosting some of your games for the public to see and play. For this reason, in addition to normal turn in requirements, please also deliver:
  • description: your game in four sentences or less — or state you don't want your game public.
  • thumbnail: 100x100 image representing your game.
  • screencast: video walking us through your game within a few minutes. (Google Hangouts captures straight to YouTube). Do not put your video on Wolfware (too big), instead link to it in readme.md. 

Assignment material is due by 8am on the day of your final. You must also demo your game in class during the final. In exceptional circumstances, earlier demonstrations may be arranged. Late demos are not possible. Late online turn in of assignment material...
  • ...will be accepted through December 14 in 461. Your readme.md file should describe any improvements made since the demo. Assignments delivered by end December 10 will lose 3%, by end December 12 9%, by end December 14 27%.
  • ...will not be accepted in 561.

Part 1: Create the playing field and frog
Create and render the models needed for the game. You should display a frog, road, and river. The road should have vehicles in it, while the river should have logs. Both should have banks on the sides. Models should be 3D, though the projections may be orthogonal. Fancy modeling is not necessary; cubes and rectangles are enough. No motion is required yet.

Part 2: Add motion to the playing field
Create motion in the playing field. Vehicles and logs should move along the road and river, arranged in groups of one, two or three. No need to animate the vehicles or logs themselves.

 Part 3: Add motion to the frog
Allow the player's frog character to jump. A simple 3D box will do, though more interesting is better (use my face if you like)! Some models are here and here. Make sure the frog can move in four directions with keyboard or mice. No need to animate the limbs of the frog at this point, just show it first at one square, then another. You need to support only one life for the moment.

Part 4: Add interaction between frog and field
The frog now has several lives. If the frog hits a vehicle, it dies. If the frog lands in the river, it dies. If the frog lands on a log, it moves with the log.

 EXTRA CREDIT GRADING:
Extra credit opportunities include the following:
  • 2% Animate the frog so that it moves its legs when the frog jumps.
  • 2% Animate the vehicles to make it seem that wheels and engine are turning.
  • 2% Track and display score. You can choose any scoring scale you want.
  • 3% When a certain number of frogs cross the road and river safely, a new level appears.
  • 3% First person Frogger. As the frog moves, a perspective camera moves with it.
  • 4% Add at least one additional vehicle (e.g. truck) or creature (e.g. turtle). Ensure that its behavior differs from other vehicles or creatures (e.g. speed or diving).
  • 5% Sound and music. On certain game events, e.g. game start, movement, collision, etc. play a sound effect. Some sounds are here and here, but feel free to use your own.