LibGDX Video Tutorial: Scene2D Introduction

30. December 2014

 

In this first of multiple part video tutorial we start looking at using Scene2D in LibGDX.  Scene2D is a library built over top of LibGDX providing a scene graph and UI/widget layer.  None of that make any sense?  Then watch the video! :)  Speaking of which, it is available in 1080p on YouTube.

 

 

The code from the example:

package com.gamefromscratch;import com.badlogic.gdx.ApplicationAdapter;import com.badlogic.gdx.Gdx;import com.badlogic.gdx.graphics.GL20;import com.badlogic.gdx.graphics.Texture;import com.badlogic.gdx.graphics.g2d.Batch;import com.badlogic.gdx.scenes.scene2d.Actor;import com.badlogic.gdx.scenes.scene2d.Stage;import com.badlogic.gdx.utils.viewport.ScreenViewport;public class Scene2DDemo1 extends ApplicationAdapter {class MyActor extends Actor {
Texture texture = new Texture(Gdx.files.internal("badlogic.jpg"));@Overridepublic void draw(Batch batch, float parentAlpha) {
batch.draw(texture,0,0);}}
Stage stage;@Overridepublic void create () {
stage = new Stage(new ScreenViewport());
MyActor actor = new MyActor();
stage.addActor(actor);
Gdx.input.setInputProcessor(stage);}@Overridepublic void render () {
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
stage.draw();}}

Programming, , ,





Core HTML5 2D Game Programming book review

29. December 2014

 

Shortly before the holidays began I received a review copy of Core HTML5 2D Game Programming and amid all the holiday insanity, I’ve been slowly making my way through this title.  As with all reviews, I don’t give star ratings, I think the value of a book is determined mostly by the perspective and requirements of the reader.  OfCoreHTML5 course, some books are just simply bad.  Bad grammar, bad topic choice, bad humour.  Fortunately that is not the case here.  From a technical perspective this is a good book (with one glaring flaw).  Now the question is, is it a good book for you?

 

First let’s talk about the target audience.  This book is not aimed at complete beginners, prior experience with JavaScript and HTML5 is assumed.  Some JavaScript related topics are covered ( dealing with this, profiling/debugging in Chrome, simple inheritance, etc. ) but if you don’t already understand some JavaScript and haven’t ever touched on HTML5 or CSS work, you will be lost.  No prior game programming experience is assumed, although you may struggle a bit with some of the terminology if completely new.  There is however a fairly solid glossary that while get you through.  For more experienced game developers, this probably isn’t the title for you.

 

Ultimately this is a learn by doing book.  Through the course of the book you are putting together a basic platforming game called Snail Bait, built using the assets of the open source Android title Replica Island.  The game is available to be played online at http://corehtml5games.com… or at least, it’s supposed to be.  When I go to that site I get:

 

image

 

Hmmm, that’s unfortunate.  I am not sure if this is an ongoing problem, or just temporary.  Judging by an earlier review on Amazon about the server being unavailable, this is a recurring problem.  It is however a bit of a big problem, as many of the code listings in this book are actually partial, so having access to the complete project is very important.  The book repeatedly references this site, so with it down, so is a great deal of the appeal of this book.  Unfortunately the publisher doesn’t appear to make the code available anywhere else, at least not the book’s version.

 

Now back to the actual contents of the book.  This book covers pretty much all aspects of what you need to make a complete 2D HTML5 game.  One critical thing to understand with this title is everything is created from scratch.  The book makes use of no existing libraries, so you learn how to do things from scratch.  There is merit to learning how to do everything yourself at least initially.  That said, you will probably make a better game using libraries that have already dealt with all the various cross browser issues and optimizations for you.

 

The book does cover a surprising number of topics, starting with handling the game loop and ending with basic network programming.  For each topic there are a number of callout notes on game development or HTML5 idiosyncrasies.  For the most part, they are topical and rarely feel superfluous.  In between it covers animation, graphics, input, hit detection, dealing with mobile (controls and resolutions), particles, audio, easing and more.  The coverage of each topic is fairly comprehensive and easily understood.  One thing you might want to note, this book is entirely about using canvas for rendering, with absolutely no coverage of WebGL.  Given the increasing support for WebGL ( IE and Safari are both finally on board ), this could be a pretty big negative.

 

As I mentioned earlier, the majority of the book is about creating a single game step by step using what you’ve learned up till this point.  The code snippets are clear but without access to the finished whole, trying to figure out how it all fits together is difficult.  There is however one chapter dedicated to putting all the pieces you’ve learned together to make a simpler but complete  game, Bodega’s Revenge.  Unfortunately, these are also partial code listings, so without access to the source code, readers may struggle filling in the pieces.

 

What’s my verdict on this book then?  The book itself is quite good.  If you have some basic JavaScript knowledge and are looking at learning how to do HTML5 canvas based game development from scratch, it’s a very good resource.  There is an impressive amount of information jammed into this book with no obvious missing pieces.  If you are looking at purchasing this title, be certain to check if the site is available before you do! 

 

I would highly suggest the author or publisher make the code available on a much more reliable source, such as Github.

Programming, ,





LibGDX Video Tutorial: Spritesheets and TextureAtlases

19. December 2014

 

In this tutorial we look at the process of creating and using a Spritesheet in LibGDX.  This involves creating a series of sprites, putting them together with TexturePacker, then using a TextureAtlas and TextureRegion to display them with our Sprite.  We also quickly look at TexturePacker ( different product ) for those that prefer a UI.  Sample code and links to included assets below the video.

 

Once again, you can view the video in HD on YouTube by click here.

 

 

Example’s Source

package com.gamefromscratch;import com.badlogic.gdx.ApplicationAdapter;import com.badlogic.gdx.Gdx;import com.badlogic.gdx.Input;import com.badlogic.gdx.InputProcessor;import com.badlogic.gdx.graphics.GL20;import com.badlogic.gdx.graphics.g2d.Sprite;import com.badlogic.gdx.graphics.g2d.SpriteBatch;import com.badlogic.gdx.graphics.g2d.TextureAtlas;import com.badlogic.gdx.graphics.g2d.TextureRegion;public class SpritesheetDemo extends ApplicationAdapter implements InputProcessor {
SpriteBatch batch;
TextureAtlas textureAtlas;
Sprite sprite;
TextureRegion textureRegion;int currentFrame = 1;int MAX_FRAMES = 19;@Overridepublic void create () {
batch = new SpriteBatch();
textureAtlas = new TextureAtlas(Gdx.files.internal("ss.txt"));
textureRegion = textureAtlas.findRegion("0001");
sprite = new Sprite(textureRegion);
sprite.setPosition(Gdx.graphics.getWidth()/2 - sprite.getWidth()/2,
Gdx.graphics.getHeight()/2 - sprite.getHeight()/2);
Gdx.input.setInputProcessor(this);}@Overridepublic void render () {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
sprite.draw(batch);
batch.end();}@Overridepublic boolean keyDown(int keycode) {if(keycode == Input.Keys.UP){
currentFrame++;if(currentFrame > MAX_FRAMES)
currentFrame = 1;
sprite.setRegion(textureAtlas.findRegion(String.format("%04d",currentFrame)));}if(keycode == Input.Keys.DOWN){
currentFrame--;if(currentFrame < 1)
currentFrame = MAX_FRAMES;
sprite.setRegion(textureAtlas.findRegion(String.format("%04d",currentFrame)));}return true;}@Overridepublic boolean keyUp(int keycode) {return false;}@Overridepublic boolean keyTyped(char character) {return false;}@Overridepublic boolean touchDown(int screenX, int screenY, int pointer, int button) {return false;}@Overridepublic boolean touchUp(int screenX, int screenY, int pointer, int button) {return false;}@Overridepublic boolean touchDragged(int screenX, int screenY, int pointer) {return false;}@Overridepublic boolean mouseMoved(int screenX, int screenY) {return false;}@Overridepublic boolean scrolled(int amount) {return false;}}

 

The sprite art used for this example was rendered using this Blender file.

The texture packing application (near the end) was CodeAndWeb’s TexturePacker.

Programming, , , ,





LibGDX Video Tutorial: Gestures–Panning, Zooming, Pinch, Tapping and more

16. December 2014

 

This video tutorial covers handling gestures in LibGDX, this includes:

  • pinch
  • zoom
  • tap
  • pan
  • long press

 

You can view the video in full resolution on Youtube here.  The source is included below.

 

Source from this tutorial example:

package com.gamefromscratch;import com.badlogic.gdx.ApplicationAdapter;import com.badlogic.gdx.Gdx;import com.badlogic.gdx.graphics.GL20;import com.badlogic.gdx.graphics.OrthographicCamera;import com.badlogic.gdx.graphics.Texture;import com.badlogic.gdx.graphics.g2d.Sprite;import com.badlogic.gdx.graphics.g2d.SpriteBatch;import com.badlogic.gdx.input.GestureDetector;import com.badlogic.gdx.math.MathUtils;import com.badlogic.gdx.math.Vector2;import com.badlogic.gdx.math.Vector3;public class GestureDemo extends ApplicationAdapter implements GestureDetector.GestureListener {
SpriteBatch batch;
Sprite sprite;
OrthographicCamera camera;
GestureDetector gestureDetector;@Overridepublic void create () {
batch = new SpriteBatch();
sprite = new Sprite(new Texture(Gdx.files.internal("storm_trooper.png")));
sprite.setPosition(-sprite.getWidth()/2,-sprite.getHeight()/2);
sprite.setCenter(0.5f,0.5f);
camera = new OrthographicCamera(1280,720);
camera.update();
gestureDetector = new GestureDetector(this);
Gdx.input.setInputProcessor(gestureDetector);}@Overridepublic void render () {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.setProjectionMatrix(camera.combined);
batch.begin();
sprite.draw(batch);
batch.end();}@Overridepublic boolean touchDown(float x, float y, int pointer, int button) {return false;}@Overridepublic boolean tap(float x, float y, int count, int button) {if(count > 1){
sprite.setPosition(-sprite.getWidth()/2,-sprite.getHeight()/2);
sprite.setSize(256f,256f);
sprite.setRotation(0f);}else {
Vector3 touchPos = new Vector3(x, y, 0);
camera.unproject(touchPos);
sprite.setPosition(touchPos.x, touchPos.y);}return true;}@Overridepublic boolean longPress(float x, float y) {
Vector3 touchPos = new Vector3(x,y,0);
camera.unproject(touchPos);if(sprite.getBoundingRectangle().contains(touchPos.x,touchPos.y)) {float alpha = sprite.getColor().a;
if (alpha >= 0.f)
sprite.setAlpha(alpha - 0.25f);else
sprite.setAlpha(1f);}return true;}@Overridepublic boolean fling(float velocityX, float velocityY, int button) {return false;}@Overridepublic boolean pan(float x, float y, float deltaX, float deltaY) {
Vector3 touchPos = new Vector3(x,y,0);
camera.unproject(touchPos);
sprite.setPosition(touchPos.x - sprite.getWidth()/2,touchPos.y - sprite.getHeight()/2);return true;}@Overridepublic boolean panStop(float x, float y, int pointer, int button) {return false;}@Overridepublic boolean zoom(float initialDistance, float distance) {
sprite.setSize(distance,distance);return true;}@Overridepublic boolean pinch(Vector2 initialPointer1, Vector2 initialPointer2, Vector2 pointer1, Vector2 pointer2)
{
float deltaX = pointer2.x - pointer1.x;float deltaY = pointer2.y - pointer1.y;float angle = (float)Math.atan2((double)deltaY,(double)deltaX) * MathUtils.radiansToDegrees; angle += 90f;if(angle < 0) angle = 360f - (-angle); sprite.setRotation(-angle);return true;}}

Programming, ,





LibGDX Video Tutorial: Cameras and Viewports. Handling multiple resolutions and aspect ratios

9. December 2014

 

In this video tutorial we look at using the different types of Cameras available, using a Camera to position your world in a device independent way.  Next we discuss the various Viewport options available for making your render results look best across a number of devices.  Since this video was released at the same time as the text version of the tutorial, I will be linking to those tutorials for code examples.

 

You can see the full 1080p video directly on YouTube or embedded below.

 

 

For the text tutorials, or for the code or assets used in this tutorial, check this tutorial on Cameras and this tutorial on Viewports.

 

Additionally, the text only tutorial also covers converting coordinates too and from your world coordinates, something I forgot to do in the video tutorial.

Programming, , ,





Month List

DisqusCommentsSummary