Animation and Games Development

1. Animation and Games Development 242-515, Semester 1, 2014-2015 • Objective • four jME examples, which introduce concepts such as the scene graph, 3D coords, rotations around axes, game loop updates, and input 6. Introduction to javaMonkeyEngine (jME)

2. Overview • 1. Hello jME3 • game loop, frame rate, scenegraph, spatials, geometry, 3D coods • 2. Hello Node • Node parent and children, rotations around axes • 3. Hello Loop • updating the scene graph; game loop again • 4. Hello Input • input manager (triggers, named actions, listeners),game loop again

3. Installing jME • For details on how to install jME, see the course website document Installing_jME.pdf at: • http://fivedots.coe.psu.ac.th/Software.coe/242-515_AGD/jME_Code/ • the examples in this part (and future parts) are also in that directory • A copy of the jME installer for Windows is at: • http://fivedots.coe.psu.ac.th/Software.coe/242-515_AGD/software/ • or visit the jME website at: • http://jmonkeyengine.com/

4. 1. Hello JME3 HelloJME3.java Press "Ok" HelloJME3 application jME Settings Window

5. A blue 3D cube is displayed, which can be translated and rotated with the mouse and the WASD and arrow keys. • Press <ESC> to quit the application. • Original code explained at: • http://jmonkeyengine.org/wiki/doku.php /jme3:beginner:hello_simpleapplication

6. Code public static void main(String[] args) { HelloJME3 app = new HelloJME3(); app.setShowSettings(false); // to switch off the jME settings window /* fixes frame rate otherwise it goes at 999 FPS, and the WASD and arrow keys hardly respond */ AppSettings settings = new AppSettings(true); settings.setFrameRate(60); // 60 FPS maximum app.setSettings(settings); app.start(); } // end of main()

7. public void simpleInitApp() /* called automatically at game startup; should contain initialzation code */ { Box b = new Box(Vector3f.ZERO, 1, 1, 1); // create 2x2x2 cube shape at the origin Geometry geom = new Geometry("Box", b); // create geometry from the box shape Material mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md"); // create an unlit material mat.setColor("Color", ColorRGBA.Blue); // set color of material to blue geom.setMaterial(mat); rootNode.attachChild(geom); // add the cube to the scene } // end of simpleInitApp()

8. Game Loop Revisted no code here yet (by me) stop run Shutdown Startup Input Update game loop Wait Render simpleInitApp() creates a jME scene graph jME draws the scene graph automatically setFrameRate(60)delays the loop so the frame rate is not too fast

9. What's a Scenegraph?

10. All the nodes in a jME scene graph are subclasses of the Spatialclass • called spatials • Two types of spatial: • Geometry: this class is used to create visible 3D objects, such as boxes, building, cars • Node: this class is used for create invisible objects which group other spatials(often Geometry spatials) together • rootNode is the top-level node in the graph • All spatials can be transformed (e.g translated, rotated)

11. HelloJME3 Scene Graph • Most Geometry objects use a Material object to specify their color and other properties. rootNode geom (a Geometry object) mat (a Material object)

12. Geometry Objects in 3D Space • A Geometry object uses 3D (x, y, z) coordinates to define its size and position in space. +y -z (0,0,0) +x -x +z -y

13. In HelloJME3, the box is defined as being 2x2x2, and is centered at the origin by default: Box b = new Box(Vector3f.ZERO, 1, 1, 1); // create 2x2x2 cube shape at the origin Geometry geom = new Geometry("Box", b); // create geometry from the box shape sides of length 2

14. 2. Hello Node HelloNode.java

15. A red box is postioned above a blue box in the scene. • The two box objects are connected to a Node object in the scene graph • they become its children • The Node object is rotated by 45 degrees around the z-axis, causing its two child boxes to rotate. • Original code explained at: • http://jmonkeyengine.org/wiki/doku.php/ jme3:beginner:hello_node

16. HelloNode Scenegraph rootNode pivot, a Node object (rotated by 45 degrees around the z-axis) redCubeGeometry (initially at (0,3,0) blueCubeGeometry (initially at (0,-1,0) mat mat

17. Code public static void main(String[] args) { HelloNode app = new HelloNode(); // : same as HelloJME3 // : app.start(); } // end of main()

18. public void simpleInitApp() { // create a 2x2x2 blue cube at (0,-1,0) Box box1 = new Box(new Vector3f(0,-1,0), 1, 1, 1); Geometry blueCube = new Geometry("Box", box1); Material mat1 = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md"); mat1.setColor("Color", ColorRGBA.Blue); blueCube.setMaterial(mat1); // create a 2x2x2 red cube at (0,3,0) above the blue cube Box box2 = new Box(new Vector3f(0,3,0), 1, 1, 1); Geometry redCube = new Geometry("Box", box2); Material mat2 = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md"); mat2.setColor("Color", ColorRGBA.Red); redCube.setMaterial(mat2); :

19. : // Create a node at (0,0,0); attach it to root node Node pivot = new Node("pivot"); rootNode.attachChild(pivot); // Attach the two boxes to the node pivot.attachChild(blueCube); pivot.attachChild(redCube); // Rotate the node 45 degrees around z-axis // Note that both cubes are rotated pivot.rotate(0, 0, (float)Math.toRadians(45)); } // end of simpleInitApp()

20. Initial Cube Positions • Before the cubes are added to the scene, the red cube is at (0, 3, 0) and the blue cube is at (0, -1, 0): +y (0, 3, 0) both boxes have sides of length 2 +x +z (0, -1, 0)

21. Final Cube Positions • The 45 degree rotation of the Node around the +z axis at (0,0,0) causes its two child nodes to be rotated when they are added to the scene: +y +x +z

22. Direction of Rotation • The direction of the rotation (e.g. to the left around the z-axis) can be worked out with the right-hand rule: • aim the thumb of your right hand along the positive axis of rotation • your fingers will point in the direction of a positive rotation around that axis • e.g. a positive rotation around the z-axis:

23. Positive rotation around the x-axis: • Positive rotation around the y-axis:

24. 3. Hello Loop HelloLoop.java the blue cube continuously rotates around the y-axis

25. A single blue cuberotates continuously around the y-axis to the right via the update action in the game loop. • Original code explained at: • http://jmonkeyengine.org/wiki/doku.php/ jme3:beginner:hello_main_event_loop

26. Code public static void main(String[] args) { HelloLoop app = new HelloLoop(); // : same as HelloJME3 // : app.start(); } // end of main()

27. // global private Geometry blueCube; public void simpleInitApp() { Box b = new Box(Vector3f.ZERO, 1, 1, 1); blueCube = new Geometry("blue cube", b); Material mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md"); mat.setColor("Color", ColorRGBA.Blue); blueCube.setMaterial(mat); rootNode.attachChild(blueCube); } // end of simpleInitApp()

28. public void simpleUpdate(float tpf) // update action, called from game loop automatically // the blueCube rotates around the y-axis to the right { blueCube.rotate(0, 2*tpf, 0); } • simpleUpdate() is called by the game engine on each game loop iteration.

29. The Game Loop no code here yet (by me) simpleUpdate() is called each time stop run Shutdown Startup Input Update game loop Wait Render simpleInitApp() creates a jME scene graph jME draws the scene graph automatically setFrameRate(60)delays the loop so the frame rate is not too fast

30. The Rotation Details • simpleUpdate() calls rotate() using 2*tpf as the rotation amount (which is in radians) around the y-axis • the tpf variable ("time per frame") is 1/ frame rate • so, for my code tpf = 1/60 ~= 0.017 • 2*0.017 radians ~= 2 degrees • this is a positive rotation around they-axis, which means it turns to the right

31. 4. Hello Input HelloInput.java the blue cube rotates by a fixed amount around the y-axis when <SPACE> or the left button is pressed

32. A single blue cube as before, but four keys ('P', 'J', 'K', and ' ') and the left mouse button are mapped to new actions. • Illustrates how the game loop deals with user input, by using listeners. • Original code explained at: • http://jmonkeyengine.org/wiki/doku.php/ jme3:beginner:hello_input_system

33. Code public static void main(String[] args) { HelloInput app = new HelloInput(); // : same as HelloJME3 // : app.start(); } // end of main()

34. // globals private Geometry blueCube; private Boolean isRunning = true; public void simpleInitApp() { Box b = new Box(Vector3f.ZERO, 1, 1, 1); blueCube = new Geometry("blue cube", b); Material mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md"); mat.setColor("Color", ColorRGBA.Blue); blueCube.setMaterial(mat); rootNode.attachChild(blueCube); initKeys(); } // end of simpleInitApp()

35. private void initKeys() // link key/mouse input triggers to listeners { // map key/mouse input triggers to named actions inputManager.addMapping("Pause", new KeyTrigger(KeyInput.KEY_P)); inputManager.addMapping("Left", new KeyTrigger(KeyInput.KEY_J)); inputManager.addMapping("Right", new KeyTrigger(KeyInput.KEY_K)); inputManager.addMapping("Rotate", new KeyTrigger(KeyInput.KEY_SPACE), new MouseButtonTrigger(MouseInput.BUTTON_LEFT)); // attach named actions to listeners inputManager.addListener(actListener, new String[]{"Pause"}); inputManager.addListener(anaListener, new String[]{"Left", "Right", "Rotate"}); } // end of initKeys()

36. // two global listeners private ActionListener actListener = new ActionListener() { public void onAction(String name, boolean keyPressed, float tpf) { if (name.equals("Pause") && !keyPressed) isRunning = !isRunning; } }; is the input trigger (key) pressed or not (i.e. released)?

37. private AnalogListener anaListener = new AnalogListener() { public void onAnalog(String name, float value, float tpf) { if (isRunning) { if (name.equals("Rotate")) blueCube.rotate(0, value*speed, 0); else if (name.equals("Right")) { Vector3f v = blueCube.getLocalTranslation(); blueCube.setLocalTranslation(v.x + value*speed, v.y, v.z); } else if (name.equals("Left")) { Vector3f v = blueCube.getLocalTranslation(); blueCube.setLocalTranslation(v.x - value*speed, v.y, v.z); } } else System.out.println("Press P to unpause."); } // end of onAnalog() }; stores how long the input trigger (key) has been pressed

38. Listening for Input • The jME inputManger object can be used to link key/mouse inputs (triggers) to listener objects • when a key (or the mouse) is pressed or released, a listener will be executed • The links are created in two steps: • addMapping(): maps key/mouse triggers to named actions (strings) • addListener(): attaches named actions to listener objects

39. Triggers  Names  Listeners • A complete list of input triggers can be found at: • http://jmonkeyengine.org/wiki/doku.php/ jme3:advanced:input_handling ActionListener object "Pause" P "Left" J AnalogListener object "Right" K ' ' "Rotate" mouse left

40. Listener Types • ActionListener • used to detect on/off actions caused by a key press/release or mouse button press/release • AnalogListener • used to detect continuous or gradual actions • the onAnalog() value argument is a float which records how long the input trigger has been pressed

41. The Game Loop simpleUpdate() is called each time two listeners stop run Shutdown Startup Input Update game loop Wait Render simpleInitApp() creates a jME scene graph jME draws the scene graph automatically setFrameRate(60)delays the loop so the frame rate is not too fast

42. AnalogListener in Detail • The onAnalog() method is called with the arguments: • onAnalog(String name, float value, float tpf) • name is the named action string (e.g. "Pause") • value is the length of time the key or mouse has been pressed • this will be be at most the time for one game loop = tpf = time per frame = 1/ frame rate = 1/60 ~= 0.017 secs

43. Translating the Cube • In onAnalog(), the "Left" and "Right" named actions make the cube move to the left and right along the x-axis. How? • The code for "Right": • Vector3f v = blueCube.getLocalTranslation();blueCube.setLocalTranslation(v.x + value*speed, v.y, v.z); • getLocationTranslation() gets the current (x, y, z) location of the cube, and setLocalTranslation() adds value*speed to the x value. -X +X 0

44. Where's speed defined? • speed is a protected float inherited from the SimpleApplication class (although it's actually from the Application class) • speed's value is 1.0f