Friday, October 26, 2012

Spectre Graphics Library #2 Debug Drawing

To the uninitiated it might be surprising that game and graphics programming is mostly math. From physically simulating a box falling, to an enemy determining what angle and velocity to throw a grenade so that it lands near the player—It's all math. Having a way to visualize these calculations while the game is being developed is an incredibly powerful debugging tool. It's much easier to debug an aiming problem by being able to see the arc of the grenade versus studying a bunch of numbers. In this post I'm going to show you how you can add a DebugDrawManager to your Spectre game and easily draw things like lines, arrows, coordinate systems, and spheres in your world to help you debug that tricky math problem.


Adding a DebugDrawManager is easy:

Now that you have a debugDrawManager you can add debug primitives to be drawn:

All Spectre Debug Draw primitives can be drawn for a fixed amount of time. This is important because it allows you to fire off a debug draw request right where you compute it and the DebugDrawManager will remember the values until they should no longer be drawn.

The only thing left is to update the DebugDrawManager in your game loop and draw it.


It only takes 6 lines of code to add a Spectre DebugDrawManager to your game. Once added you can draw the following primitives for any length of time in any color:
  • Line
  • Sphere
  • Circle
  • Axis Aligned Bounding Box
  • Coordinate System Frame
  • Cross
Next in the Spectre Graphics Library series I will discuss the resource manager, which magically refreshes your assets while your game is running!

Wednesday, October 24, 2012

Building Interactive Content with HTML5 Canvas and Dart

Kevin Moore ran an excellent Hangout on building interactive content (games!) with HTML5 Canvas and Dart. He wrote a minesweeper clone—Pop, Pop, Win!

Be sure to checkout the source code.

Spectre Graphics Library #1 Hooking Up A Camera

Every 3D game needs a camera. If you're implementing a first person perspective game, Spectre has a camera and camera controllers built in. Adding a FPS style camera with Spectre is really easy. In this post I will walk you through the four steps:
  1. Creating a camera
  2. Creating a camera controller
  3. Updating the camera controller based on user input
  4. Update the camera every frame


Step 1: Create the camera

The code is self explanatory. The camera is sitting 2.5 units down the Z axis and focused on the origin. The aspect ratio of the camera is 16:9.

The camera has the following knobs:
  • Camera position
  • Camera focus position
  • Aspect Ratio
  • Field of view
  • Near cut off plane
  • Far cut off plane

Step 2: Create the camera controller


Step 3: Updating the camera controller based on user input

Lots of code there. From the top:
  1. When a W,A,S, or D key is pressed down update the camera controller to move in that direction
  2. When the mouse is moved and we are in pointer lock mode, accumulate the mouse movement
  3. When the the canvas is clicked, request pointer lock mode
  4. Hook up DOM event handlers to call our functions when the mouse or keyboard is active
Step 4: Update the camera every frame


The above four steps will give you a working FPS style camera for your 3D game. Once you have this working you will be able to fly around the world using W, A, S, and D keys and your mouse. By using pointer lock the mouse pointer will never move out of the window and stop functioning.

Next time: retained mode debug drawing.

Saturday, October 20, 2012

Introductions

Welcome to www.dartgamedevs.org. Your one stop for all the latest news and tutorials on dart game development.