Animation and Games Development
description
Transcript of Animation and Games Development
![Page 1: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/1.jpg)
242-515 AGD: 6. Intro to jME 1
• Objectiveo four jME examples, which introduce
concepts such as the scene graph, 3D coords, rotations around axes, game loop updates, and input
Animation and Games
Development242-515, Semester 1, 2014-2015
6. Introduction to javaMonkeyEngine (jME)
![Page 2: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/2.jpg)
242-515 AGD: 6. Intro to jME 2
• 1. Hello jME3o game loop, frame rate, scenegraph, spatials,
geometry, 3D coods
• 2. Hello Nodeo Node parent and children, rotations around axes
• 3. Hello Loopo updating the scene graph; game loop again
• 4. Hello Inputo input manager (triggers, named actions, listeners),
game loop again
Overview
![Page 3: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/3.jpg)
242-515 AGD: 6. Intro to jME 3
• For details on how to install jME, see the course website document Installing_jME.pdf at:o http://fivedots.coe.psu.ac.th/Software.coe/
242-515_AGD/jME_Code/o the examples in this part (and future parts) are also in
that directory
• A copy of the jME installer for Windows is at:o http://fivedots.coe.psu.ac.th/Software.coe/
242-515_AGD/software/
• or visit the jME website at:o http://jmonkeyengine.com/
Installing jME
![Page 4: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/4.jpg)
242-515 AGD: 6. Intro to jME 4
1. Hello JME3HelloJME3.java
Press "Ok"
jME Settings Window
HelloJME3 application
![Page 5: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/5.jpg)
242-515 AGD: 6. Intro to jME 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:o http://jmonkeyengine.org/wiki/doku.php
/jme3:beginner:hello_simpleapplication
![Page 6: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/6.jpg)
242-515 AGD: 6. Intro to jME 6
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()
Code
![Page 7: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/7.jpg)
242-515 AGD: 6. Intro to jME 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()
![Page 8: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/8.jpg)
242-515 AGD: 6. Intro to jME 8
Game Loop Revisted
setFrameRate(60)delays the loopso the frame rateis not too fast
no code here yet (by me)
simpleInitApp()creates a jME scene graph jME draws the
scene graphautomatically
UpdateStartup Input
RenderWait
Shutdown
stoprun
game loop
![Page 9: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/9.jpg)
242-515 AGD: 6. Intro to jME 9
What's a Scenegraph?
![Page 10: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/10.jpg)
242-515 AGD: 6. Intro to jME 10
• All the nodes in a jME scene graph are subclasses of the Spatial classo called spatials
• Two types of spatial:o Geometry: this class is used to create visible 3D
objects, such as boxes, building, carso 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)
![Page 11: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/11.jpg)
242-515 AGD: 6. Intro to jME 11
• Most Geometry objects use a Material object to specify their color and other properties.
HelloJME3 Scene Graph
rootNode
geom(a Geometry object)
mat(a Material object)
![Page 12: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/12.jpg)
242-515 AGD: 6. Intro to jME 12
• A Geometry object uses 3D (x, y, z) coordinates to define its size and position in space.
Geometry Objects in 3D Space
+x
+y
+z
-x
-z
-y
(0,0,0)
![Page 13: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/13.jpg)
242-515 AGD: 6. Intro to jME 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
![Page 14: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/14.jpg)
242-515 AGD: 6. Intro to jME 14
2. Hello Node HelloNode.java
![Page 15: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/15.jpg)
242-515 AGD: 6. Intro to jME 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 grapho 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:o http://jmonkeyengine.org/wiki/doku.php/
jme3:beginner:hello_node
![Page 16: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/16.jpg)
242-515 AGD: 6. Intro to jME 16
HelloNode ScenegraphrootNode
blueCubeGeometry(initially at (0,-1,0)
mat mat
pivot, a Node object(rotated by 45 degrees around the z-axis)
redCubeGeometry(initially at (0,3,0)
![Page 17: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/17.jpg)
242-515 AGD: 6. Intro to jME 17
public static void main(String[] args) { HelloNode app = new HelloNode(); // : same as HelloJME3 // : app.start(); } // end of main()
Code
![Page 18: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/18.jpg)
242-515 AGD: 6. Intro to jME 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);
:
![Page 19: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/19.jpg)
242-515 AGD: 6. Intro to jME 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()
![Page 20: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/20.jpg)
242-515 AGD: 6. Intro to jME 20
• 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):
Initial Cube Positions
+x
+y
+z (0, -1, 0)
both boxes havesides of length 2
(0, 3, 0)
![Page 21: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/21.jpg)
242-515 AGD: 6. Intro to jME 21
• 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:
Final Cube Positions
+x
+y
+z
![Page 22: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/22.jpg)
242-515 AGD: 6. Intro to jME 22
• The direction of the rotation (e.g. to the left around the z-axis) can be worked out with the right-hand rule:o aim the thumb of your right hand along the positive
axis of rotationo your fingers will point in the direction of a positive
rotation around that axiso e.g. a positive rotation around the z-axis:
Direction of Rotation
![Page 23: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/23.jpg)
242-515 AGD: 6. Intro to jME 23
• Positive rotation around the x-axis:
• Positive rotation around the y-axis:
![Page 24: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/24.jpg)
242-515 AGD: 6. Intro to jME 24
3. Hello Loop HelloLoop.java
the blue cube continuously
rotates around the y-axis
![Page 25: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/25.jpg)
242-515 AGD: 6. Intro to jME 25
• A single blue cube rotates continuously around the y-axis to the right via the update action in the game loop.
• Original code explained at:o http://jmonkeyengine.org/wiki/doku.php/
jme3:beginner:hello_main_event_loop
![Page 26: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/26.jpg)
242-515 AGD: 6. Intro to jME 26
public static void main(String[] args) { HelloLoop app = new HelloLoop(); // : same as HelloJME3 // : app.start(); } // end of main()
Code
![Page 27: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/27.jpg)
242-515 AGD: 6. Intro to jME 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()
![Page 28: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/28.jpg)
242-515 AGD: 6. Intro to jME 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.
![Page 29: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/29.jpg)
242-515 AGD: 6. Intro to jME 29
The Game Loop
setFrameRate(60)delays the loopso the frame rateis not too fast
simpleUpdate()is called each time
simpleInitApp()creates a jME scene graph
jME draws thescene graphautomatically
UpdateStartup Input
RenderWait
Shutdown
stoprun
game loop
no code here yet (by me)
![Page 30: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/30.jpg)
242-515 AGD: 6. Intro to jME 30
• 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 rateo so, for my code tpf = 1/60 ~= 0.017o 2*0.017 radians ~= 2 degreeso this is a positive rotation around the
y-axis, which means it turns to the right
The Rotation Details
![Page 31: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/31.jpg)
242-515 AGD: 6. Intro to jME 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
![Page 32: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/32.jpg)
242-515 AGD: 6. Intro to jME 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:o http://jmonkeyengine.org/wiki/doku.php/
jme3:beginner:hello_input_system
![Page 33: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/33.jpg)
242-515 AGD: 6. Intro to jME 33
public static void main(String[] args) { HelloInput app = new HelloInput(); // : same as HelloJME3 // : app.start(); } // end of main()
Code
![Page 34: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/34.jpg)
242-515 AGD: 6. Intro to jME 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()
![Page 35: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/35.jpg)
242-515 AGD: 6. Intro to jME 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()
![Page 36: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/36.jpg)
242-515 AGD: 6. Intro to jME 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)?
![Page 37: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/37.jpg)
242-515 AGD: 6. Intro to jME 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
![Page 38: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/38.jpg)
242-515 AGD: 6. Intro to jME 38
• The jME inputManger object can be used to link key/mouse inputs (triggers) to listener objects o when a key (or the mouse) is pressed or released, a
listener will be executed
• The links are created in two steps:o addMapping(): maps key/mouse triggers to named
actions (strings)
o addListener(): attaches named actions to listener objects
Listening for Input
![Page 39: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/39.jpg)
242-515 AGD: 6. Intro to jME 39
• A complete list of input triggers can be found at:o http://jmonkeyengine.org/wiki/doku.php/
jme3:advanced:input_handling
Triggers Names Listeners
P
J
K
' 'mouse
left
"Pause"
"Left"
"Right"
"Rotate"
ActionListenerobject
AnalogListenerobject
![Page 40: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/40.jpg)
242-515 AGD: 6. Intro to jME 40
• 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
Listener Types
![Page 41: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/41.jpg)
242-515 AGD: 6. Intro to jME 41
The Game Loop
setFrameRate(60)delays the loopso the frame rateis not too fast
simpleUpdate()is called each time
simpleInitApp()creates a jME scene graph
jME draws thescene graphautomatically
UpdateStartup Input
RenderWait
Shutdown
stoprun
game loop
two listeners
![Page 42: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/42.jpg)
242-515 AGD: 6. Intro to jME 42
• The onAnalog() method is called with the arguments:o onAnalog(String name, float value, float tpf)
o name is the named action string (e.g. "Pause")o 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
AnalogListener in Detail
![Page 43: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/43.jpg)
242-515 AGD: 6. Intro to jME 43
• 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":o 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.
Translating the Cube
+X-X0
![Page 44: Animation and Games Development](https://reader036.fdocuments.net/reader036/viewer/2022081519/56813b43550346895da41a03/html5/thumbnails/44.jpg)
242-515 AGD: 6. Intro to jME 44
• Where's speed defined?o speed is a protected float inherited from the
SimpleApplication class (although it's actually from the Application class)
o speed's value is 1.0f