Going to start posting tutorials here for using the 2D Framework. Once I’m happy with (or other’s are) them, I’ll move it over to the Wiki.
Seeeeew… to start, here is the SimpleApplication setup for the tutorials: It basically just set’s up the screen and adds an AnimLayer to work with.
import com.jme3.app.SimpleApplication;
import com.jme3.renderer.RenderManager;
import tonegod.gui.core.Screen;
import tonegod.gui.framework.core.AnimLayer;
/**
*
* @author t0neg0d
*/
public class Anim_Tutorial_00 extends SimpleApplication {
private Screen screen;
private AnimLayer layer;
public static void main(String[] args) {
Anim_Tutorial_00 app = new Anim_Tutorial_00();
app.start();
}
@Override
public void simpleInitApp() {
initGUIScreen();
layoutGUI();
}
private void initGUIScreen() {
screen = new Screen(this,"tonegod/gui/style/atlasdef/style_map.gui.xml");
screen.setUseTextureAtlas(true,"tonegod/gui/style/atlasdef/atlas.png");
guiNode.addControl(screen);
flyCam.setDragToRotate(true);
inputManager.setCursorVisible(true);
}
private void layoutGUI() {
layer = screen.addAnimLayer();
}
@Override
public void simpleUpdate(float tpf) { }
@Override
public void simpleRender(RenderManager rm) { }
}
Now, the first thing we’ll do is create a single AnimElement, set up it’s Texture and TextureRegions and then add a single QuadData (quad) to the mesh.
NOTE: The QuadData selects a random TextureRegion each time the app starts. It is also set to movable, so you can drag it around the screen.
Here is the Texture to use for the examples below…
import com.jme3.app.SimpleApplication;
import com.jme3.math.FastMath;
import com.jme3.math.Vector2f;
import com.jme3.renderer.RenderManager;
import tonegod.gui.core.Screen;
import tonegod.gui.framework.core.AnimElement;
import tonegod.gui.framework.core.AnimLayer;
import tonegod.gui.framework.core.QuadData;
import tonegod.gui.framework.core.TextureRegion;
/**
*
* @author t0neg0d
*/
public class Anim_Tutorial_01 extends SimpleApplication {
private Screen screen;
private AnimLayer layer;
public static void main(String[] args) {
Anim_Tutorial_01 app = new Anim_Tutorial_01();
app.start();
}
@Override
public void simpleInitApp() {
initGUIScreen();
layoutGUI();
}
private void initGUIScreen() {
screen = new Screen(this,"tonegod/gui/style/atlasdef/style_map.gui.xml");
screen.setUseTextureAtlas(true,"tonegod/gui/style/atlasdef/atlas.png");
guiNode.addControl(screen);
flyCam.setDragToRotate(true);
inputManager.setCursorVisible(true);
}
AnimElement el;
QuadData q1;
private void setupTexture(AnimElement el) {
// Set the texture for the AnimElement
el.setTexture(screen.createNewTexture("Textures/animtutorial.png"));
// Loop through and create a TextureRegion for each 32x32 icon in the texture
for (int y = 0; y < 4; y++) {
for (int x = 0; x < 4; x++) {
TextureRegion tr = el.addTextureRegion("x" + x + "y" + y, x*32, y*32, 32, 32);
// Flip the TextureRegion along the Y axis
tr.flip(false, true);
}
}
}
private void layoutGUI() {
layer = screen.addAnimLayer();
el = new AnimElement(screen.getApplication().getAssetManager()) {
@Override
public void animElementUpdate(float tpf) {
// We will use this later for managing some QuadData
// specific animations
}
};
// Set up the AnimElement's Texture and available TextureRegions
setupTexture(el);
// Create a single quad as part of the AnimElement
q1 = el.addQuad(
"q1", // The key id for the new QuadData
"x" + FastMath.nextRandomInt(0,3) + "y" + FastMath.nextRandomInt(0,3), // A random icon from our texture regions
Vector2f.ZERO, // position 0,0 - Will set this later
Vector2f.ZERO // origin 0,0 - Will set this later
);
// Set the dimensions of the QuadData
q1.setDimensions(50,50);
// Center the Quad to the middle of the screen
// NOTE: The AnimElement is still at position 0,0
q1.setPosition(
(screen.getWidth()/2)-(q1.getWidth()/2),
(screen.getHeight()/2)-(q1.getHeight()/2)
);
// Make this quad movable via the mouse or touch events
q1.setIsMovable(true);
// Initialize the AnimElement
el.initialize();
// Add the AnimElement to the screen layer
layer.addAnimElement("el", el);
}
@Override
public void simpleUpdate(float tpf) { }
@Override
public void simpleRender(RenderManager rm) { }
}
Now we can start to take a look at Temporal Actions. The gist of these are they perform a transform over a duration of time using the defined Interpolation (default id linear).
So, let’s add a RotateByAction to the quad inside of the AnimElement.
Everytime the action is restarted, we’ll set the QuadData’s origin to a random Vector within it’s dimensions.
import com.jme3.app.SimpleApplication;
import com.jme3.math.FastMath;
import com.jme3.math.Vector2f;
import com.jme3.renderer.RenderManager;
import tonegod.gui.core.Screen;
import tonegod.gui.framework.animation.RotateByAction;
import tonegod.gui.framework.core.AnimElement;
import tonegod.gui.framework.core.AnimLayer;
import tonegod.gui.framework.core.QuadData;
import tonegod.gui.framework.core.TextureRegion;
/**
* test
* @author normenhansen
*/
public class Anim_Tutorial_02 extends SimpleApplication {
private Screen screen;
private AnimLayer layer;
public static void main(String[] args) {
Anim_Tutorial_02 app = new Anim_Tutorial_02();
app.start();
}
@Override
public void simpleInitApp() {
initGUIScreen();
layoutGUI();
}
private void initGUIScreen() {
screen = new Screen(this,"tonegod/gui/style/atlasdef/style_map.gui.xml");
screen.setUseTextureAtlas(true,"tonegod/gui/style/atlasdef/atlas.png");
guiNode.addControl(screen);
flyCam.setDragToRotate(true);
inputManager.setCursorVisible(true);
}
AnimElement el;
QuadData q1;
RotateByAction ra;
private void setupTexture(AnimElement el) {
// Set the texture for the AnimElement
el.setTexture(screen.createNewTexture("Textures/animtutorial.png"));
// Loop through and create a TextureRegion for each 32x32 icon in the texture
for (int y = 0; y < 4; y++) {
for (int x = 0; x < 4; x++) {
TextureRegion tr = el.addTextureRegion("x" + x + "y" + y, x*32, y*32, 32, 32);
// Flip the TextureRegion along the Y axis
tr.flip(false, true);
}
}
}
private void layoutGUI() {
layer = screen.addAnimLayer();
ra = new RotateByAction();
el = new AnimElement(screen.getApplication().getAssetManager()) {
@Override
public void animElementUpdate(float tpf) {
if (!q1.actions.contains(ra)) {
// Set a random origin for q1
float oX = FastMath.rand.nextFloat() * (q1.getWidth()/2);
if (FastMath.rand.nextBoolean()) oX = -oX;
oX += (q1.getWidth()/2);
float oY = FastMath.rand.nextFloat() * (q1.getHeight()/2);
if (FastMath.rand.nextBoolean()) oY = -oY;
oY += (q1.getHeight()/2);
q1.setOrigin(oX, oY);
// Reset the quad's rotation
q1.setRotation(0);
// Restart the RotateByAnimation
ra.restart();
q1.addAction(ra);
}
}
};
// Set up the AnimElement's Texture and available TextureRegions
setupTexture(el);
// Create a single quad as part of the AnimElement
q1 = el.addQuad(
"q1", // The key id for the new QuadData
"x" + FastMath.nextRandomInt(0,3) + "y" + FastMath.nextRandomInt(0,3), // A random icon from our texture regions
Vector2f.ZERO, // position 0,0 - Will set this later
Vector2f.ZERO // origin 0,0 - Will set this later
);
// Set the dimensions of the QuadData
q1.setDimensions(50,50);
// Center the Quad to the middle of the screen
// NOTE: The AnimElement is still at position 0,0
q1.setPosition(
(screen.getWidth()/2)-(q1.getWidth()/2),
(screen.getHeight()/2)-(q1.getHeight()/2)
);
// Set the origin to the middle of the QuadData
q1.setOrigin(q1.getWidth()/2,q1.getHeight()/2);
// Make this quad movable via the mouse or touch events
q1.setIsMovable(true);
// Initialize the AnimElement
el.initialize();
// Add the AnimElement to the screen layer
layer.addAnimElement("el", el);
// Define and add the RotateByAction
ra.setDuration(1.5f);
ra.setAmount(360);
q1.addAction(ra);
}
@Override
public void simpleUpdate(float tpf) { }
@Override
public void simpleRender(RenderManager rm) { }
}
And… now, we’ll create 20 QuadData’s within the single AnimElement, each using it’s own RotateByAction; each movable and effecting the zOrder of the quad’s within the AnimElement:
import com.jme3.app.SimpleApplication;
import com.jme3.math.FastMath;
import com.jme3.math.Vector2f;
import com.jme3.renderer.RenderManager;
import tonegod.gui.core.Screen;
import tonegod.gui.framework.animation.RotateByAction;
import tonegod.gui.framework.core.AnimElement;
import tonegod.gui.framework.core.AnimLayer;
import tonegod.gui.framework.core.QuadData;
import tonegod.gui.framework.core.TextureRegion;
/**
* test
* @author normenhansen
*/
public class Anim_Tutorial_03 extends SimpleApplication {
private Screen screen;
private AnimLayer layer;
public static void main(String[] args) {
Anim_Tutorial_03 app = new Anim_Tutorial_03();
app.start();
}
@Override
public void simpleInitApp() {
initGUIScreen();
layoutGUI();
}
private void initGUIScreen() {
screen = new Screen(this,"tonegod/gui/style/atlasdef/style_map.gui.xml");
screen.setUseTextureAtlas(true,"tonegod/gui/style/atlasdef/atlas.png");
guiNode.addControl(screen);
flyCam.setDragToRotate(true);
inputManager.setCursorVisible(true);
}
AnimElement el;
private void setupTexture(AnimElement el) {
// Set the texture for the AnimElement
el.setTexture(screen.createNewTexture("Textures/animtutorial.png"));
// Loop through and create a TextureRegion for each 32x32 icon in the texture
for (int y = 0; y < 4; y++) {
for (int x = 0; x < 4; x++) {
TextureRegion tr = el.addTextureRegion("x" + x + "y" + y, x*32, y*32, 32, 32);
// Flip the TextureRegion along the Y axis
tr.flip(false, true);
}
}
}
private void layoutGUI() {
layer = screen.addAnimLayer();
el = new AnimElement(screen.getApplication().getAssetManager()) {
@Override
public void animElementUpdate(float tpf) {
for (QuadData qd : quads.values()) {
if (qd.actions.isEmpty()) {
// Reset the quad's rotation
qd.setRotation(0);
// Add a RotateByAnimation
RotateByAction ra = new RotateByAction();
ra.setDuration(1.5f);
ra.setAmount(360);
qd.addAction(ra);
}
}
}
};
// Set up the AnimElement's Texture and available TextureRegions
setupTexture(el);
for (int i = 0; i < 20; i++) {
// Create a single quad as part of the AnimElement
QuadData qd = el.addQuad(
"q" + i, // The key id for the new QuadData
"x" + FastMath.nextRandomInt(0,3) + "y" + FastMath.nextRandomInt(0,3), // A random icon from our texture regions
Vector2f.ZERO, // position 0,0 - Will set this later
Vector2f.ZERO // origin 0,0 - Will set this later
);
// Set the dimensions of the QuadData
qd.setDimensions(50,50);
// Center the Quad to the middle of the screen
// NOTE: The AnimElement is still at position 0,0
qd.setPosition(
((screen.getWidth()-qd.getWidth())*FastMath.nextRandomFloat())+(qd.getWidth()/2),
((screen.getHeight()-qd.getHeight())*FastMath.nextRandomFloat())+(qd.getHeight()/2)
);
// Set the origin to the middle of the QuadData
qd.setOrigin(qd.getWidth()/2,qd.getHeight()/2);
// Make this quad movable via the mouse or touch events
qd.setIsMovable(true);
// Initialize the AnimElement
}
el.initialize();
// Add the AnimElement to the screen layer
layer.addAnimElement("el", el);
}
@Override
public void simpleUpdate(float tpf) { }
@Override
public void simpleRender(RenderManager rm) { }
}
That’s it for now… Need to start this same sort of thing for using Layout’s as well.
/wave
