Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
21. January 2014

 

Back in this post I discussed ways of making dynamically equipped 2D sprites.  One way was to render out a 3D object to 2D textures dynamically.  So far we have looked at working in 3D in LibGDX, then exporting and rendering an animated model from Blender, the next step would be a dynamic 3D object to texture.  At first glance I thought this would be difficult, but reality is, it was stupidly simple.  In fact, the very first bit of code I wrote simply worked!  Well, except the results being upside down I suppose… details details…

 

Anyways, that is what this post discusses.  Taking a 3D scene in LibGDX and rendering in a 2D texture.  The code is just a modification of the code from the Blender to GDX post from a couple days back.

 

package com.gamefromscratch;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Files.FileType;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.InputProcessor;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.PerspectiveCamera;
import com.badlogic.gdx.graphics.Pixmap.Format;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.graphics.g3d.Environment;
import com.badlogic.gdx.graphics.g3d.Model;
import com.badlogic.gdx.graphics.g3d.ModelBatch;
import com.badlogic.gdx.graphics.g3d.ModelInstance;
import com.badlogic.gdx.graphics.g3d.attributes.ColorAttribute;
import com.badlogic.gdx.graphics.g3d.loader.G3dModelLoader;
import com.badlogic.gdx.utils.UBJsonReader;
import com.badlogic.gdx.graphics.g3d.utils.AnimationController;
import com.badlogic.gdx.graphics.g3d.utils.AnimationController.AnimationDesc;
import com.badlogic.gdx.graphics.g3d.utils.AnimationController.AnimationListener;
import com.badlogic.gdx.graphics.glutils.FrameBuffer;



public class ModelTest implements ApplicationListener, InputProcessor {
    private PerspectiveCamera camera;
    private ModelBatch modelBatch;
    private Model model;
    private ModelInstance modelInstance;
    private Environment environment;
    private AnimationController controller;
    private boolean screenShot = false;
    private FrameBuffer frameBuffer;
    private Texture texture = null;
    private TextureRegion textureRegion;
    private SpriteBatch spriteBatch;
    
    @Override
    public void create() {        
        // Create camera sized to screens width/height with Field of View of 75 degrees
        camera = new PerspectiveCamera(
                75,
                Gdx.graphics.getWidth(),
                Gdx.graphics.getHeight());
        
        // Move the camera 5 units back along the z-axis and look at the origin
        camera.position.set(0f,0f,7f);
        camera.lookAt(0f,0f,0f);
        
        // Near and Far (plane) represent the minimum and maximum ranges of the camera in, um, units
        camera.near = 0.1f; 
        camera.far = 300.0f;

        // A ModelBatch is like a SpriteBatch, just for models.  Use it to batch up geometry for OpenGL
        modelBatch = new ModelBatch();
        
        // Model loader needs a binary json reader to decode
        UBJsonReader jsonReader = new UBJsonReader();
        // Create a model loader passing in our json reader
        G3dModelLoader modelLoader = new G3dModelLoader(jsonReader);
        // Now load the model by name
        // Note, the model (g3db file ) and textures need to be added to the assets folder of the Android proj
        model = modelLoader.loadModel(Gdx.files.getFileHandle("data/benddemo.g3db", FileType.Internal));
        // Now create an instance.  Instance holds the positioning data, etc of an instance of your model
        modelInstance = new ModelInstance(model);

        //move the model down a bit on the screen ( in a z-up world, down is -z ).
        modelInstance.transform.translate(0, 0, -2);

        // Finally we want some light, or we wont see our color.  The environment gets passed in during
        // the rendering process.  Create one, then create an Ambient ( non-positioned, non-directional ) light.
        environment = new Environment();
        environment.set(new ColorAttribute(ColorAttribute.AmbientLight, 0.8f, 0.8f, 0.8f, 1.0f));
        
        // You use an AnimationController to um, control animations.  Each control is tied to the model instance
        controller = new AnimationController(modelInstance);  
        // Pick the current animation by name
        controller.setAnimation("Bend",1, new AnimationListener(){

            @Override
            public void onEnd(AnimationDesc animation) {
                // this will be called when the current animation is done. 
                // queue up another animation called "balloon". 
                // Passing a negative to loop count loops forever.  1f for speed is normal speed.
                controller.queue("Balloon",-1,1f,null,0f);
            }

            @Override
            public void onLoop(AnimationDesc animation) {
                // TODO Auto-generated method stub
                
            }
            
        });
        
        frameBuffer = new FrameBuffer(Format.RGB888,Gdx.graphics.getWidth(),Gdx.graphics.getHeight(),false);
        Gdx.input.setInputProcessor(this);
        
        spriteBatch = new SpriteBatch();
    }

    @Override
    public void dispose() {
        modelBatch.dispose();
        model.dispose();
    }

    @Override
    public void render() {
        // You've seen all this before, just be sure to clear the GL_DEPTH_BUFFER_BIT when working in 3D
        Gdx.gl.glViewport(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);

        // When you change the camera details, you need to call update();
        // Also note, you need to call update() at least once.
        camera.update();
        
        // You need to call update on the animation controller so it will advance the animation.  Pass in frame delta
        controller.update(Gdx.graphics.getDeltaTime());
        
        
        // If the user requested a screenshot, we need to call begin on our framebuffer
        // This redirects output to the framebuffer instead of the screen.
        if(screenShot)
            frameBuffer.begin();

        // Like spriteBatch, just with models!  pass in the box Instance and the environment
        modelBatch.begin(camera);
        modelBatch.render(modelInstance, environment);
        modelBatch.end();
        
        // Now tell OpenGL that we are done sending graphics to the framebuffer
        if(screenShot)
        {
            frameBuffer.end();
            // get the graphics rendered to the framebuffer as a texture
            texture = frameBuffer.getColorBufferTexture();
            // welcome to the wonderful world of different coordinate systems!
            // simply put, the framebuffer is upside down to normal textures, so we have to flip it
            // Use a TextureRegion to do so
            textureRegion = new TextureRegion(texture);
            // and.... FLIP!  V (vertical) only
            textureRegion.flip(false, true);
        }
        
        // In the case that we have a texture object to actually draw, we do so
        // using the old familiar SpriteBatch to do so.
        if(texture != null)
        {
            spriteBatch.begin();
            spriteBatch.draw(textureRegion,0,0);
            spriteBatch.end();
            screenShot = false;
        }
    }

    @Override
    public void resize(int width, int height) {
    }

    @Override
    public void pause() {
    }

    @Override
    public void resume() {
    }

    @Override
    public boolean keyDown(int keycode) {
        // TODO Auto-generated method stub
        return false;
    }

    @Override
    public boolean keyUp(int keycode) {
        // TODO Auto-generated method stub
        return false;
    }

    @Override
    public boolean keyTyped(char character) {
        // If the user hits a key, take a screen shot.
        this.screenShot = true;
        return false;
    }

    @Override
    public boolean touchDown(int screenX, int screenY, int pointer, int button) {
        // TODO Auto-generated method stub
        return false;
    }

    @Override
    public boolean touchUp(int screenX, int screenY, int pointer, int button) {
        // TODO Auto-generated method stub
        return false;
    }

    @Override
    public boolean touchDragged(int screenX, int screenY, int pointer) {
        // TODO Auto-generated method stub
        return false;
    }

    @Override
    public boolean mouseMoved(int screenX, int screenY) {
        // TODO Auto-generated method stub
        return false;
    }

    @Override
    public boolean scrolled(int amount) {
        // TODO Auto-generated method stub
        return false;
    }
}

And… that’s it.

Run the code and you get the exact same results as the last example:

blenderAnimation

 

However, if you press any key, the current frame is saved to a texture, and that is instead displayed on screen.  Press a key again and it will update to the current frame:

image

Of course, the background colour is different, because we didn’t implicitly set one.  The above a is LibGDX Texture object, which can now be treated as a 2D sprite, used as a texture map, whatever.

 

The code is ultra simple.  We have a toggle variable screenShot, that gets set if a user hits a key.  The actual process of rendering to texture is done with the magic of FrameBuffersl  Think of a framebuffer as a place for OpenGL to render other than your video card.  So instead of drawing the graphics to the screen, it instead draws the graphics to a memory buffer.  We then get this memory buffer as a texture using getColorBufferTexture().  The only complication is the frame buffer is rendered upside down.  This is easily fixed by wrapping the Texture in a TextureRegion and flipping the V coordinate.  Finally we display our newly generated texture using our old friend, the SpriteBatch.

 

 

Gotta love it when something you expect to be difficult ends up being ultra easy.  Next I have to measure the performance, so see if this is something that can be done in a realtime situation, or do we need to do this onload/change?

Programming


19. January 2014

 

Let me start off by saying that exporting from Blender is always a pain in the ass.  This experience didn’t prove to be an exception.  I will describe the process in some detail.

 

First and foremost, Blender 2.69 DIDNT work.  At least not for me, not matter what I did, Blender 2.69 would not export texture information in FBX format.  This cost me many hours of my life.  Once I switched to 2.68 everything worked.  Your mileage may vary, but in my experience, 2.69 simply would not work.  Another thing, something I lost another couples hours to… you need to use GL2 in LibGDX!

 

A lot of this process takes place on the Blender end.  I obviously don’t go into depth in how to use Blender.  If you are completely new to Blender, I highly suggest you run through this tutorial, it will teach you pretty much everything you need to know to follow along.

 

STEP 1: Model your … model

 

This step is pretty straight forward, you need to model an object to be exported.  I created this:

image

I took a standard cube, went in edit mode, extrude the face, select all and sub-divided it.

 

STEP 2: Texture your model

 

Not complete sure why, but every model that is exported to FBX seems to require a texture.  Once again, YOU NEED A TEXTURE.

Next, FBX does NOT include the texture information.  This means you have to save your texture to an image file, and add that image to the assets folder of your project.

You need to UV Unwrap your object.  In Edit mode you can accomplish this by selecting all, then UV Unwrap->Smart UV Project.  In the UV/Image window, it should look like:

image

There are a couple limitations here.  You need to make sure you texture face enabled:

image

With your object selected, in materials, make sure Face Textures is selected.

 

Next be sure to select a texture:

image

Type is Image, then under the Image section, select your texture image.  This is the file that needs to be added to your assets folder.

Scroll down to Mapping, change Coordinates to UV, select your UVMap from the drop down, leave Project as flat:

image

 

At this point you can check if your texture is right by switching over to GLSL in the properties panel ( hit N key ) of the 3D View.

 

STEP 3: Set up your rig

 

This part is a bit tricky if you’ve never done it before.  You can create a series of named animations that will be exported.  You animate by setting key frames.  First you need to setup up your skeleton.  Simply select Add->Armature->Single Bone.

image

 

Position the bone within your model.  Switch into edit mode and select the end “knob” of the bode and select Extrude ( E ) to create more bones.  Repeat until it looks like this:  ( FYI, you can use Z to make a model see through, handy when placing bones ).

image

Next you want to set the bones to manipulate the underlying mesh.

In Object mode, select your mesh, then shift click select the underlying bones.  Now parent them by hit CTRL + P and select “With automatic weight”

image

 

STEP 4: Animate your model

 

Now you can set up your animations.  Since we want multiple animations in the same file we are doing this slightly differently.

First set up your duration.  In the timeline, set end to the last frame of your longest animation:

image

 

 

Bring up a dopesheet view, then select the Action Editor:

image

 

Click the + icon, or new button ( depending if you have any existing animations, your options will change )

image

Name the animation.

 

Now go to your first frame ( Frame 1 using the controls in timeline ).

Select your bone/armature and switch to POSE mode.  Press A to select all bones.

Create a keyframe by hitting I ( as in “eye” ) then in the resulting menu select LocRotScale ( as in, Location, Rotation and Scale ), which will create a keyframe tracking those three things.

image

 

Now advance to the next frame you want to create a keyframe upon, rotate, scale or move your bone, then select all bones again and create another key.

You can create multiple named animation using the same process.  SImply click the + Icon, name another animation, go back to frame 1, position it, set a keyframe, animate, setting key frames.

 

STEP 5: Exporting to FBX

 

This part is pretty hit or miss.  You have a couple options, you can select just your mesh and armature, or simply export everything.

Then select File->Export->Autodesk FBX:

image

 

The documents say to stay with the default axis settings and the FBX converter will take care of the rest.  Frankly I could never get this to work.

These are the settings I am currently using:

image

 

STEP 6: Convert to 3dgb format and add to Eclipse

Open a command prompt where ever you exported the FBX.  Make sure your texture file is there as well.  If you haven’t already, make sure to download fbx-conv, extract that file to the directory you exported your FBX to.  Open a command prompt and CD to that directory.  Next type:

fbx-conv-win32 –f yourfilename.fbx

image

 

This should generate a g3db file.  Copy it and your textures to the assets/data directory of your android project:

image

 

STEP 7: The code

 

This code demonstrates how to load a 3D model and play multiple animations.  There is no description, beyond the code comments.  If you have any questions the comments dont cover, ask them below!

 

package com.gamefromscratch;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Files.FileType;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.PerspectiveCamera;
import com.badlogic.gdx.graphics.g3d.Environment;
import com.badlogic.gdx.graphics.g3d.Model;
import com.badlogic.gdx.graphics.g3d.ModelBatch;
import com.badlogic.gdx.graphics.g3d.ModelInstance;
import com.badlogic.gdx.graphics.g3d.attributes.ColorAttribute;
import com.badlogic.gdx.graphics.g3d.loader.G3dModelLoader;
import com.badlogic.gdx.utils.UBJsonReader;
import com.badlogic.gdx.graphics.g3d.utils.AnimationController;
import com.badlogic.gdx.graphics.g3d.utils.AnimationController.AnimationDesc;
import com.badlogic.gdx.graphics.g3d.utils.AnimationController.AnimationListener;



public class ModelTest implements ApplicationListener {
    private PerspectiveCamera camera;
    private ModelBatch modelBatch;
    private Model model;
    private ModelInstance modelInstance;
    private Environment environment;
    private AnimationController controller;
    
    @Override
    public void create() {        
        // Create camera sized to screens width/height with Field of View of 75 degrees
        camera = new PerspectiveCamera(
                75,
                Gdx.graphics.getWidth(),
                Gdx.graphics.getHeight());
        
        // Move the camera 5 units back along the z-axis and look at the origin
        camera.position.set(0f,0f,7f);
        camera.lookAt(0f,0f,0f);
        
        // Near and Far (plane) represent the minimum and maximum ranges of the camera in, um, units
        camera.near = 0.1f; 
        camera.far = 300.0f;

        // A ModelBatch is like a SpriteBatch, just for models.  Use it to batch up geometry for OpenGL
        modelBatch = new ModelBatch();
        
        // Model loader needs a binary json reader to decode
        UBJsonReader jsonReader = new UBJsonReader();
        // Create a model loader passing in our json reader
        G3dModelLoader modelLoader = new G3dModelLoader(jsonReader);
        // Now load the model by name
        // Note, the model (g3db file ) and textures need to be added to the assets folder of the Android proj
        model = modelLoader.loadModel(Gdx.files.getFileHandle("data/blob.g3db", FileType.Internal));
        // Now create an instance.  Instance holds the positioning data, etc of an instance of your model
        modelInstance = new ModelInstance(model);
        
        //fbx-conv is supposed to perform this rotation for you... it doesnt seem to
        modelInstance.transform.rotate(1, 0, 0, -90);
        //move the model down a bit on the screen ( in a z-up world, down is -z ).
        modelInstance.transform.translate(0, 0, -2);

        // Finally we want some light, or we wont see our color.  The environment gets passed in during
        // the rendering process.  Create one, then create an Ambient ( non-positioned, non-directional ) light.
        environment = new Environment();
        environment.set(new ColorAttribute(ColorAttribute.AmbientLight, 0.8f, 0.8f, 0.8f, 1.0f));
        
        // You use an AnimationController to um, control animations.  Each control is tied to the model instance
        controller = new AnimationController(modelInstance);  
        // Pick the current animation by name
        controller.setAnimation("Bend",1, new AnimationListener(){

            @Override
            public void onEnd(AnimationDesc animation) {
                // this will be called when the current animation is done. 
                // queue up another animation called "balloon". 
                // Passing a negative to loop count loops forever.  1f for speed is normal speed.
                controller.queue("balloon",-1,1f,null,0f);
            }

            @Override
            public void onLoop(AnimationDesc animation) {
                // TODO Auto-generated method stub
                
            }
            
        });
    }

    @Override
    public void dispose() {
        modelBatch.dispose();
        model.dispose();
    }

    @Override
    public void render() {
        // You've seen all this before, just be sure to clear the GL_DEPTH_BUFFER_BIT when working in 3D
        Gdx.gl.glViewport(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
        
        // For some flavor, lets spin our camera around the Y axis by 1 degree each time render is called
        //camera.rotateAround(Vector3.Zero, new Vector3(0,1,0),1f);
        // When you change the camera details, you need to call update();
        // Also note, you need to call update() at least once.
        camera.update();
        
        // You need to call update on the animation controller so it will advance the animation.  Pass in frame delta
        controller.update(Gdx.graphics.getDeltaTime());
        // Like spriteBatch, just with models!  pass in the box Instance and the environment
        modelBatch.begin(camera);
        modelBatch.render(modelInstance, environment);
        modelBatch.end();
    }

    @Override
    public void resize(int width, int height) {
    }

    @Override
    public void pause() {
    }

    @Override
    public void resume() {
    }
}

 

Now if you run it, you should see:

blenderAnimation

 

And that, is how you get a textured animated 3D model from Blender to LibGDX.

 

VIDEO EDITION!

 

Ok, that might have been a bit confusing, so I decided to screen capture the entire process.  The following video shows creating, texturing, animating then exporting a model from Blender to LibGDX.  There is no instruction beyond what is above, but it might help you seeing the entire process, especially if something I said above didn’t make sense, or if your own export doesn’t work out.

 

The video on YouTube is much higher resolution than the embedded one below.

 

Let me know if you have any questions.

Programming Art


14. January 2014

 

EDIT: You can download the precompiled binaries here.  The Mac binaries are in fbx-conv.zip.  The reason for the failed build is LibGDX used a previous build of Autodesk’s library.

 

If you want to convert 3D models to LibGDX’s native file format G3DB you need to use fbx-conv.  The general instructions for the entire process is available here.  If you are working on Windows, you are in luck, as there are pre-compiled binaries.  If you are however working on MacOS, like I currently am, there is a bit more of an adventure ahead.

 

Simply put, you need to compile from scratch and that requires a few hoops to be jumped through, especially if you are used to working only in Java, as the source is actually C++.  I will run through the process I went through.

 

First and foremost, you need to install Xcode if you haven’t already.  You can get Xcode in the App Store, or here.

Make sure command line tools are installed.  Simply open a terminal and type “gcc”.  If a prompt appears asking you to install the tools, do it.

NewImage

If it doesn’t, yay, you have them installed. 

Run gcc from the terminal one more time after install is completed and agree to the EULA.

 

Ok, Xcode is configured.  Now you need to set up the Autodesk FBX sdk.  From this link locate and download FBX SDK 2014.2.1 GCC.  Once downloaded, in Finder double click to extract, then double click the extracted file to install.

By default it will install to Application/Autodesk/FBX SDK/2014.2.1.  Obviously if you do this at a later date, the version number will be different.  You need to add FBX_SDK_ROOT to your environment.  To do so open a terminal window and cd to your home ( ~ ) directory.  Type:

pico .profile

Add the line:

export FBX_SDK_ROOT='/Applications/Autodesk/FBX SDK/2014.2.1'

 

to the end of the script.  Then hit CTRL+X to exit, and chose Y when prompted.  Now you need to create a new terminal window for the updated settings to be valid.

 

Next you need to install Premake.  Simply download the file from the link, extract it and copy the binary ‘pre make’ somewhere it can be seen ( I in a fit of poor judgement simply used /usr/bin ).

 

OK, ready to go.  First we need to download the fbx-conv code.  Open a terminal and cd to a directory you want to build in.

type:

git clone https://github.com/libgdx/fbx-conv.git

./generate_xcode

 

This will create an Xcode project in the directory build/xcode3.  cd into that directory then type:

xcodebuild

If all goes well, you will now have fbx-conv in the root directory you cloned the git to.  fox-conv depends on the dylib file libfbxsdk.dylib being in the path.  I simply copied it from Applications/Autodesk/FBX SDK/2014.2.1/lib/gcc4/ub/release/ to the same folder as fbx-conv.  That said, I really don’t understand dylib pathing in OSX since they changed it in OSX 10.8 so there is probably a much better solution.

 

 

There is one gotcha I ran into.  The code actually failed to compile on this line:

animStack->GetScene()->GetEvaluator()->SetContext(animStack);

In FbxConverter.h. It seems GetEvaluator() is no longer a member of  FBXScene.  Perhaps fbx-conv was built on a previous release?  Anyways, I simply commented the line out and fbx-conv seems to still work.  YMMV. 

Programming


10. January 2014

As I mentioned yesterday when talking about how to generate character sprites supporting dynamic inventory, the very first step would be to actually figure out how to do 3D in LibGDX.

 

Well, I did, and thankfully it’s pretty simple.  This isn’t a tutorial by any stretch of the means, but what follows is basically the “minimum” 3D application you can create in LibGDX.  It simple creates a blue cube and rotates the camera around it.  While it isn’t a tutorial, it is heavily documented, so you should be able to figure things out with ease, especially if you’ve already done my LibGDX tutorial series.

 

package com.gamefromscratch;

 

import com.badlogic.gdx.ApplicationListener;

import com.badlogic.gdx.Gdx;

import com.badlogic.gdx.graphics.Color;

import com.badlogic.gdx.graphics.GL10;

import com.badlogic.gdx.graphics.PerspectiveCamera;

import com.badlogic.gdx.graphics.VertexAttributes.Usage;

import com.badlogic.gdx.graphics.g3d.Environment;

import com.badlogic.gdx.graphics.g3d.Material;

import com.badlogic.gdx.graphics.g3d.Model;

import com.badlogic.gdx.graphics.g3d.ModelBatch;

import com.badlogic.gdx.graphics.g3d.ModelInstance;

import com.badlogic.gdx.graphics.g3d.attributes.ColorAttribute;

import com.badlogic.gdx.graphics.g3d.utils.ModelBuilder;

import com.badlogic.gdx.math.Vector3;

 

public class TestApp implements ApplicationListener {

   private PerspectiveCamera camera;

   private ModelBatch modelBatch;

   private Model box;

   private ModelInstance boxInstance;

   private Environment environment;

 

   @Override

   public void create() {

   // Create camera sized to screens width/height with Field of View of 75 degrees

      camera = new PerspectiveCamera(

      75,

      Gdx.graphics.getWidth(),

      Gdx.graphics.getHeight());

 

      // Move the camera 3 units back along the z-axis and look at the origin

      camera.position.set(0f,0f,3f);

      camera.lookAt(0f,0f,0f);

 

      // Near and Far (plane) repesent the minimum and maximum ranges of the camera in, um, units

      camera.near = 0.1f; 

      camera.far = 300.0f;

 

      // A ModelBatch is like a SpriteBatch, just for models.  Use it to batch up geometry for OpenGL

      modelBatch = new ModelBatch();

 

      // A ModelBuilder can be used to build meshes by hand

      ModelBuilder modelBuilder = new ModelBuilder();

 

      // It also has the handy ability to make certain premade shapes, like a Cube

      // We pass in a ColorAttribute, making our cubes diffuse ( aka, color ) red.

      // And let openGL know we are interested in the Position and Normal channels

      box = modelBuilder.createBox(2f, 2f, 2f, 

      new Material(ColorAttribute.createDiffuse(Color.BLUE)),

      Usage.Position | Usage.Normal

      );

 

      // A model holds all of the information about an, um, model, such as vertex data and texture info

      // However, you need an instance to actually render it.  The instance contains all the 

      // positioning information ( and more ).  Remember Model==heavy ModelInstance==Light

      boxInstance = new ModelInstance(box,0,0,0);

 

      // Finally we want some light, or we wont see our color.  The environment gets passed in during

      // the rendering process.  Create one, then create an Ambient ( non-positioned, non-directional ) light.

      environment = new Environment();

      environment.set(new ColorAttribute(ColorAttribute.AmbientLight, 0.8f, 0.8f, 0.8f, 1.0f));

   }

 

   @Override

   public void dispose() {

      modelBatch.dispose();

      box.dispose();

   }

 

   @Override

   public void render() {

      // You've seen all this before, just be sure to clear the GL_DEPTH_BUFFER_BIT when working in 3D

      Gdx.gl.glViewport(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());

      Gdx.gl.glClearColor(1, 1, 1, 1);

      Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);

 

      // For some flavor, lets spin our camera around the Y axis by 1 degree each time render is called

      camera.rotateAround(Vector3.Zero, new Vector3(0,1,0),1f);

      // When you change the camera details, you need to call update();

      // Also note, you need to call update() at least once.

      camera.update();

 

      // Like spriteBatch, just with models!  pass in the box Instance and the environment

      modelBatch.begin(camera);

      modelBatch.render(boxInstance, environment);

      modelBatch.end();

   }

 

   @Override

   public void resize(int width, int height) {

   }

 

   @Override

   public void pause() {

   }

 

   @Override

   public void resume() {

   }

}

 

And when you run it you should see:

RotatingCube

 

Next up, loading a 3D model from Blender and playing the animations.

 

By the way, although this isn’t a tutorial, if you have a question about something I did feel free to use the comments and I will do my best to answer!

Programming


18. December 2013

 

One of the nicest features of Scene2D is the UI layer built over top of it.  Scene2D.ui provides a series of widgets that make creating a UI an breeze, something often lacking in game development libraries.  That said, there is one very confusing stumbling block before you can get to work with UI… Skins.

 

A skin is a collection of files that go together to make up your user interface.

First is a JSON file ( JavaScript Object Notation ), which is a popular JavaScript based data storage format, like XML light.  In the JSON file you describe the various properties of your skin such as how your widgets should look. 

Next is a texture atlas.  We looked at using TexturePacker to make a texture atlas back in the graphics tutorial.  The texture atlas describes the layout of all the images that make up your UI.  This is a .atlas extension file.

Along with the texture atlas, you’ve also got the actual image that TexturePacker generated.

Finally you have the fnt and the associated image.  We covered fonts back in the Hello World tutorial.

 

This can all seem pretty daunting, especially starting from scratch.  Fortunately there is a skin included in the LibGDX tests.  The files you are interested in are uiskin.atlas, uiskin.json, uiskin.png, default.png and default.fnt.  Simply download and place each of these files in the Android assets/data folder of your project.  If you are downloading from the Github link I provided, be sure to download the RAW version of each file!

 

Let’s take a quick look at some of the above files for a better idea of what goes into them.  I will ignore the font files, we already covered that.  The atlas and png file we’ve already covered as well, but here is uiskin.png, so you’ve got some idea what is included:

uiskin

 

These are the various graphics that go in to creating the UI.  Let’s take a look at uiskin.json:

 

 

{
com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: default.fnt } },
com.badlogic.gdx.graphics.Color: {
    green: { a: 1, b: 0, g: 1, r: 0 },
    white: { a: 1, b: 1, g: 1, r: 1 },
    red: { a: 1, b: 0, g: 0, r: 1 },
    black: { a: 1, b: 0, g: 0, r: 0 }
},
com.badlogic.gdx.scenes.scene2d.ui.Skin$TintedDrawable: {
    dialogDim: { name: white, color: { r: 0, g: 0, b: 0, a: 0.45 } }
},
com.badlogic.gdx.scenes.scene2d.ui.Button$ButtonStyle: {
    default: { down: default-round-down, up: default-round },
    toggle: { down: default-round-down, checked: default-round-down, up: default-round }
},
com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
    default: { down: default-round-down, up: default-round, font: default-font, fontColor: white },
    toggle: { down: default-round-down, up: default-round, checked: default-round-down, font: default-font, fontColor: white, 
    downFontColor: red }
},
com.badlogic.gdx.scenes.scene2d.ui.ScrollPane$ScrollPaneStyle: {
    default: { vScroll: default-scroll, hScrollKnob: default-round-large, background: default-rect, hScroll: default-scroll, 
    vScrollKnob: default-round-large }
},
com.badlogic.gdx.scenes.scene2d.ui.SelectBox$SelectBoxStyle: {
    default: {
        font: default-font, fontColor: white, background: default-select,
        scrollStyle: default,
        listStyle: { font: default-font, selection: default-select-selection }
    }
},
com.badlogic.gdx.scenes.scene2d.ui.SplitPane$SplitPaneStyle: {
    default-vertical: { handle: default-splitpane-vertical },
    default-horizontal: { handle: default-splitpane }
},
com.badlogic.gdx.scenes.scene2d.ui.Window$WindowStyle: {
    default: { titleFont: default-font, background: default-window, titleFontColor: white },
    dialog: { titleFont: default-font, background: default-window, titleFontColor: white, stageBackground: dialogDim }
},
com.badlogic.gdx.scenes.scene2d.ui.Slider$SliderStyle: {
    default-horizontal: { background: default-slider, knob: default-slider-knob }
},
com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {
    default: { font: default-font, fontColor: white }
},
com.badlogic.gdx.scenes.scene2d.ui.TextField$TextFieldStyle: {
    default: { selection: selection, background: textfield, font: default-font, fontColor: white, cursor: cursor }
},
com.badlogic.gdx.scenes.scene2d.ui.CheckBox$CheckBoxStyle: {
    default: { checkboxOn: check-on, checkboxOff: check-off, font: default-font, fontColor: white }
},
com.badlogic.gdx.scenes.scene2d.ui.List$ListStyle: {
    default: { fontColorUnselected: white, selection: default-rect-pad, fontColorSelected: white, font: default-font }
},
com.badlogic.gdx.scenes.scene2d.ui.Touchpad$TouchpadStyle: {
    default: { background: default-pane, knob: default-round-large }
},
com.badlogic.gdx.scenes.scene2d.ui.Tree$TreeStyle: {
    default: { minus: tree-minus, plus: tree-plus, selection: default-select-selection }
}
}

 

If you’ve ever used CSS, this should look immediately familiar.  You are essentially telling LibGDX how to style each class by using the fully qualified Java class name.  Let’s take a look at a particular example we are going to be using shortly, TextButton.

 

com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
    default: { down: default-round-down, up: default-round, font: default-font, fontColor: white },
    toggle: { down: default-round-down, up: default-round, checked: default-round-down, font: default-font, 
fontColor: white, 
    downFontColor: red }
}

 

You are setting the values for the class TextButtonStyle or on of the classes it is derived from.  You may notice for fontColor, “white” is passed.  If you look up in the skin, you can see how its defined:

com.badlogic.gdx.graphics.Color: {
    green: { a: 1, b: 0, g: 1, r: 0 },
    white: { a: 1, b: 1, g: 1, r: 1 },
    red: { a: 1, b: 0, g: 0, r: 1 },
    black: { a: 1, b: 0, g: 0, r: 0 }
}

 

You can see “white” is a Color with the values 1/1/1 for rgb and 1 for alpha… in other words, white Smile

The other key thing is the value for down.  As you can see from the TextButtonStyle, down is a Drawable.  The value specified, default-round-down is an entry in the atlas file:

default-round-down
  rotate: false
  xy: 99, 29
  size: 12, 20
  split: 5, 5, 5, 4
  orig: 12, 20
  offset: 0, 0
  index: -1

This is specifying the size and location within the uiskin.png file.  More details about skins can be found on the wiki.

 

Now that you have your skin files, let’s take a look at a sample using Scene2d.ui:

package com.gamefromscratch;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.scenes.scene2d.InputEvent;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton;
import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;

public class UIDemo implements ApplicationListener {
    private SpriteBatch batch;
    private Skin skin;
    private Stage stage;

    @Override
    public void create() {        
        batch = new SpriteBatch();
        skin = new Skin(Gdx.files.internal("data/uiskin.json"));
        stage = new Stage();

        final TextButton button = new TextButton("Click me", skin, "default");
        
        button.setWidth(200f);
        button.setHeight(20f);
        button.setPosition(Gdx.graphics.getWidth() /2 - 100f, Gdx.graphics.getHeight()/2 - 10f);
        
        button.addListener(new ClickListener(){
            @Override 
            public void clicked(InputEvent event, float x, float y){
                button.setText("You clicked the button");
            }
        });
        
        stage.addActor(button);
        
        Gdx.input.setInputProcessor(stage);
    }

    @Override
    public void dispose() {
        batch.dispose();
    }

    @Override
    public void render() {        
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
        
        batch.begin();
        stage.draw();
        batch.end();
    }

    @Override
    public void resize(int width, int height) {
    }

    @Override
    public void pause() {
    }

    @Override
    public void resume() {
    }
}

 

You run this app and you should see:

image

 

Most of this is pretty familiar at this point.  We create a Skin object and load it using the typical file IO calls.  The file you want to load is the json config, uiskin.json.  This file points to all all of the other files, they will be loaded automatically by the Skin.  Next we create a TextButton, the values passed in to the constructor are the text to display on the button, the skin and the value in the skin to use.  If you look at the entry for the TextButton in the skin JSON file see:

com.badlogic.gdx.scenes.scene2d.ui.Button$ButtonStyle: {
    default: { down: default-round-down, up: default-round },
    toggle: { down: default-round-down, checked: default-round-down, up: default-round }
},

You are saying you want to use the “default” entry.  Coincidentally, if you dont specify anything, default will be used.  We position and size the button and set up a click listener that simply changes the displayed text when the button is clicked.  Now the cool part… UI widgets like TextButton are simply Actors, so they work just like other Scene2D actors, add it to the stage and it’s ready to go.

 

Scene2D ui is a fairly involved topic so I will follow up with a more advanced example next tutorial.

Programming


AppGameKit Studio

See More Tutorials on DevGa.me!

Month List