LibGDX Simple Slides

Currently working on a game for Wing Wing Shoot Bag using Java with LibGDX. While trying to learn Pixel/Game art I produced a few animated GIFS, one of which would be perfect for the main screen.

Being a little lazy I thought of loading in the individual images and looping through them rather than create one large image and cut it up programmatically for an animation. This worked, I had created a sort of slide player.

After pressing start within the game menu I wanted the current frame to pause and fade out, then the intro of the game would play. The intro follows the movie to which the game is based, several images would fade in, hold then fade out.

Fading in and out
First off I needed to find a way to fade an image in or out, there is a library available to do this: https://code.google.com/p/java-universal-tween-engine/

I followed the guide and setup a Sprite Accessor class: Class source

Slide Manager
Next I created a slide manager class, this would hold an array of slides which could have some simple attributes:

  • sprite;              // The image
  • fade_duration  // Time to fade in or out
  • hold_duration  // Time to hold slide on screen after fade in
  • total_duration  // time for fade in, hold and fade out
  • gap_duration   // time between slides

Classes: Slide ClassSlide Manager

Creating and using the Slide manager
Basically you initiate the new class then add to the array of images with some settings. During the render loop you tell the class to update and it will play your images in order; fading them in and out.

// Declare a new var
SlideManager slide_manager;

// Slides
slide_manager = new SlideManager();

// Add slides that fade in for 4 seconds, holds for 1 seconds
// After fade out leaves a gap of 1 seconds before next slide

slide_manager.add_slide(new Slide(“intro/screens/russian.png”, 4, 1, 1));
slide_manager.add_slide(new Slide(“intro/screens/spy.png”, 4, 1, 1));

// Add a slide with an overlay animation
// Passes animation width, speed and position
slide_manager.add_slide(new Slide(“bck.png”, 2, 0, 1, “frames.png”, 70, 0.1f, 45, 25));

I started playing about with a few variations of slides, would probably move the extras such as animations into an array and create a new animation class to pass with the slide.

This is a render loop for the intro screen, when the slides are done it just loads the next screen:

public void render(float delta) {
Gdx.gl.glClearColor(0, 0, 0, 0);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
slide_manager.tick(delta);

// DRAW
batch.begin();
if (!slide_manager.finished){
slide_manager.draw(batch);
}
batch.end();

if (slide_manager.finished){
game.setScreen(game.level_one);
}
}

This is a very quick prototype which only allows simple fading in and out and overlaying of one animation. It requires a library to be imported even though setting the colour(Alpha) of a sprite over time is very simple I could go on to use many more of the libs features.

This class will allows me to quickly create simple comic book style cuts scenes between levels while prototyping.

 

Pixel Art and new project

I have been busy lately with all sorts of things, time off work, ran a marathon but I did start learning pixel art recently so thought I would blog about it.

There many types of artists, sadly I fall into the category of a coder with a zero game budget who has to make all his own art or will have no game. After making the two Jam games I felt it was time to return to my main game “Endure” but while wasting some time on FaceBook I saw a message on a group I follow saying they were celebrating their 10 Year anniversary:

Wing Wing Shoot Bag Facebook group

Anyway, I offered to make the group a game based on a feature length movie they made some 6 years ago about a transgender cop called “Susan Balaka”, they also make short comedy sketches but this had a full story which would be awesome to make into a game.

Oh yes Pixel Art,the game would require lots of animated scenes and pixel style art, so I started having a go:

First Attempt at Balaka

This was a bit shoddy and the guns look like socks! Next I found some forums and asked for help, you may find these useful:


Forums
Final Boss Blues
Way of the Pixel
Pixel Joint
Reddit – pixelart

With some help and reading tutorials I broke a whole new set of pixel art rules and came up with these:

Two main characters (Line from the movie)

One rule I broke early on was using far to many colours, the advise I received most often referred to colour palette and contrast between colours. A useful site for checking how many colours your using:
http://wouterpleizier.nl/pj/index.php?input=http://snag.gy/FngMY.jpg

After some help from Final Boss Blues I started adding some shading to the characters faces, as you progress you look back at your earlier work and realise you will need to redo them over.

Trying to add detail

There will be all sorts of assets in the Balaka game, I had a go at making an arcade machine to test the use of isometric angles with pixel art, I am far from good at this but you can see what it is and its not too ugly?

After making several static images that I tried my hand at animation, I have made simple animations for other games but I always seem to make some sort of mistake, here the flash from the screen is not really pixel art as such and the feet/body position is all wrong.

So there you have it, I am now learning pixel art while making a game. I would suggest finding some good pixel artists and following their work, realise that you will make mistakes, when asking for help do not take criticisms to heart and say thanks when people take the time out to give help.

“His head looks like a potato” – I could have tried to defend this comment but its true and made me laugh.

Happy Pixeling!

 

Humble indie dev’s game jam adventure

So I decided to take part in a few game jams to see what they were all about, I have mixed feelings about them and will take you through my highs and lows during two recent jams.

What is a Jam?
Within a set period of time you have to produce a game to some theme or basic specification. The rules are usually basic.

Why Jam
Having clear goals and a deadline really gets you working! I was making pixel art and thinking of how it would work in the game, basically multitasking like a beast. You learn new things rapidly and learn to actually finish tasks so there are lots of pro’s to taking part in a jam. For many this will be the first project this see through to publishing.

My Journey
After seeing the Flappy Bird game do so well I though why not make something simple like this to see project from start to finish in a few days, then I found Flappy Jam!

http://itch.io/jam/flappyjam

Flappy Jam main image

Clicky Pixel
I got to work right away on the basic game and had a square dodging blocks before long and it ran well on all mobiles! WIN! Then I made my first big mistake, instead of adding graphics and submitting I decided to add levels, HP and character unlocks.

As a solo hobby developer I have little time and no resources and a wife who likes to see me every now and again, I basically locked myself in my study night after night polishing the game and trying to do far too much.

note: Samsung mobile with battery save mode enabled = poor fps!

My Entry

My First Itch.io game

Only 4 votes! I submitted at some stupid time in the morning then posted a bit about the game and slept the next evening at 7pm, I was tired and still have a busy day job to do! oh and I am training for a marathon and have 30+ miles to run a week.

Once the game was in the list I lost all interest and had to get my sleep pattern back to normal and try to make it up to the wife.

Feedback
Feedback

I did get a little bit of feedback, Okeedoke Studios comment is priceless, imagine that a Flappy Game being a bit grindy! This really made my day and also 556 views and 199 downloads was great.

I promised the wife I would wait a while before the next jam and get back to my main game Endure and take it easy, so I waited a few days then saw CyberPunkJam and thought I am doing that!


Cyber Punk Jam
With Clicky Pixel finished and shelved I was no longer a jam virgin and ready for more, this time I would be even more focused and learn from my mistakes, so I decided on an even more complicated game that would require much more art, more code and this time Id go for mobile, Windows, Mac and HTML!

CYPERPUNK Jam main image

So make a game based on the image of some punks jumping off a building, first thought was base jumping, too simple I thought, before I could even research it someone had posted their game and yes it was a sky diving game.

I decided I would do something a little different and after some time decided to remake an old Amiga classic “Walker”.

Using LibGDX and some ripped sprites of the origin game I quickly mocked up a walking bot: View the Sprites here

I was not intending to keep these sprites in the demo I submitted, but I had little time to work on the game. I produced some punks to use as enemies and played about with pixels for a few evenings:

Some sprites for the game
I also changed my screen saver and bought a new t-shirt! Making animated sprites is a slow process for a coder, I had to keep Googling for examples to help me get ideas, the game could have done with many more enemies but there was no game yet and I was running out of time. I made two types of punks, a helicopter and an Akira style biker, I am really happy with them overall.
Final Day

I only actually submitted this game as the jam had a 48 hour extension, I came home from work late, sat at my computer with very little complete; a robot that moved and shot bullets, a few enemies that had no AI and just ran across the screen, at this point there were no sounds and no background.

I made a background and 3 shops that would give the impression you were moving forward between waves, this took about an hour. Next I had to produce an algorithm to produce wave attacks, I got this so wrong, the first waves were fine but if you got to around round 6 you were completed overwhelmed, but I had run out of time. I think it was around 4am when I uploaded the .jar and HTML versions of the game, “Mech Stroller”PLAY HERE

Mech Stroller Wave 0

The game was full of bugs and lacked:

  • Power Ups
  • Decent AI
  • Up / Down movement
  • Balanced Waves 
  • Parachutes!

I spent an hour over my lunch break and put better waves into place and made the enemies a little more random with their movement, once this was published I saw a tweet saying I may have broken some rules in updating the game after the cut off point! If the game had been pulled I would have been annoyed but seems I got away with this.

Twitter, Forums & Reddit
So this time I understood it was important to get people playing the game and getting more feedback than with Clicky P. I posted to twitter every so often, posted in some of the Java forums I use and also hit Reddit for the first time.

Those people at Reddit must deal with a lot of spam and general time wasters, if you delete a post they make you wait forever to repost, I almost gave up on it, had to make a second account just to post, it is just not a nice interface to use:

It was worth using Reddit though as it brought some traffic to the game page, overall the game had around 500 views and maybe 70 downloads of the .Jar file. This just shows if you are producing a real game you need a solid


Voting
If you want to place in the Jam you are going to have to spend time convincing others who submitted games to play and vote on your game, some 268 people contributed to the jam in total, you are going to want a decent number of votes or a least a few that score you highly.

I played other games for hours and hours adding comments and trying to vote fairly, I must have voted on about 150 of the games, each time if possible tweeting to the dev asking them to check out my game in return.

I had 34 votes from other devs:

I am pretty happy with this score, considering I probably only spent half the available time on the game and put more effort into learning pixel art its a miracle there was any game at all. I find it strange how people will comment on whats missing from the game, the jam was around 10/12 days long and I am one person with a full time job, collaborating might be a better idea for more adventurous ideas.

Conclusions

I have learned a lot about myself, game making and a small faction of the Indie Game Scene during the last month or so. There are a lot of kind people out there on Twitter willing to help, give feedback and motivate you, this is great and really helped me stick at it.

Before you dive into coding or drawing try to come up with a simple idea that is possible in complete in the given time. Make a list of the assets you need for the game, if the list is getting to big you are aiming too high, try to truncate the list as much as possible. If you know others who might like to team up then work this out before the jam, I would have loved to team up with an artist for this so I could concentrate on the code.

I did enjoy talking to other developers after the jam ended but I did feel a bit of an anti-climax, the fun for me was making the game even though I didn’t have enough time to really get it to a point I was happy with.

Use the Jams to make you fast prototype an idea and get some feedback but I would not suggest taking the comments on your game too personally, not everyone will like what you have done and this was made in no time at all.


Most of all try to have fun and interact with the Indie community as much as possible! I hope you enjoyed reading, please check out my games and throw any questions to me on Twitter @carelesslabs

Careless releases Android game

Download the game here: http://itch.io/jam/flappyjam/rate/2989

After seeing all the Flappy Clones being published on the Play store I thought it would be fun to attempt a similar game, a few days after I started the #FlappyJam started so I had a deadline!

I quickly got the basic mechanics up and running, a score, randomly placed blockers and a character that moved up and down. Not totally convinced with the movement I put a trail in place which I thought looked neat and it made it into the final game.

To make this game stand apart from Flappy Bird I decided to add levels, each time you play your score adds to a total percentage and upon reaching that the next level is unlocked.

Then just to add another dimension to the game I added a bank, character selection and hearts (HP). All of your points go into your bank total, hearts allow you to get hit in game and the new characters get smaller so its easier to avoid the blockers.
Working on a smaller game has been a lot of fun, the level design was quite rewarding, the way in which its coded means you can just drop in a new folder with the correct graphics; change one variable number_of_levels and its instantly in game.
I will try to add a more detailed write up on actual code soon, please check out the game at:

LibGDX and Parse.com

To have a break from fish this evening decided to set up a highscore board as a test case for JSON and online storage for Endure.

Full Source Code

Signed up for Parse.com a very neat data-store for mobiles and web applications, they provide example projects for JavaScript, Unity, Android and other platforms.

The best thing is the price… free!

Features

  • Requests: 1 million/month
  • Pushes: 1 million/month
  • Burst Limit: 20/second

 Scores Table

 I did try out the Android sample project but without your app being Andriod as expected there was no way to use the .Jar libraries that Parse provide, but they do offer a great Restful method to POST and GET your data.

Custom Parse Class

I wrote a very simple Java class and imported Java’s own Net and IO libraries did not take long to get some scores in and out of the service.

LibGDX has its own Net library so I also gave this a go as my code looked messy, have some speed tests to run yet but happy to be able to push and pull data for free and with no real hassle.

I will not go through my code put post the class for you to see, the important lines here are:

httpPost.setHeader(“X-Parse-Application-Id”, app_id);
httpPost.setHeader(“X-Parse-REST-API-Key”, app_key);

conn.setRequestProperty(“X-Parse-Application-Id”, app_id);
conn.setRequestProperty(“X-Parse-REST-API-Key”, app_key);

While looking how others use Parse with Java I saw a lot of complaints about unauthorized errors, Parse provides many different keys and you have to set and use the right ones. 

Full Source Code

Code adding hard coded score and retrieving all scores

Lots of testing left to do with this and of course will need to ask the user their name (@twitter_tag) when they start the game, will use this for the upcoming fishing competition and keep a track of all the fish caught.

Also will need to use a JSON library to properly generate the string that is post and also parse the results into objects.

Thanks for reading.

Simple Screen Shake

Lots of games add excitement by using screen shake, when your character gets hit or on certain events a little rumble really lets the player know something has occurred. While prototyping some features of Endure I revisited some old code to add a small rumble when the fishing line breaks:

Small Screen Shake

Large Screen Shake (Over the top)

Code (Simple Rumble Class)

Pastie Source Code

 

public class Rumble {

  public float time;
  Random random;
  float x, y;
  float current_time;
  float power;
  float current_power;

  public Rumble(){
    time = 0;
    current_time = 0;
    power = 0;
    current_power = 0;
  }
  
  // Call this function with the force of the shake 
  // and how long it should last      
  public void rumble(float power, float time) {
    random = new Random();
    this.power = power;
    this.time = time;
    this.current_time = 0;
  }
        
  public void tick(float delta, GameController gc, Hero hero){
      // GameController contains the camera
      // Hero is the character centre screen
    
    if(current_time <= time) {
      current_power = power * ((time - current_time) / time);
      // generate random new x and y values taking into account
      // how much force was passed in
      x = (random.nextFloat() - 0.5f) * 2 * current_power;
      y = (random.nextFloat() - 0.5f) * 2 * current_power;
      
      // Set the camera to this new x/y position           
      gc.camera.translate(-x, -y);
      current_time += delta;
    } else {
      // When the shaking is over move the camera back to the hero position
      gc.camera.position.x = hero.x;
      gc.camera.position.y = hero.y;
    }
  }      
}

This is all the code to achieve a basic screen shake. The timer for the affect works its way down to zero then stops. For large shakes once the rumble is over it will snap back to the character and look very jumpy but this is just a prototype.

To use the class create a new instance of it then conditionally produce a new RUMBLE! Below you see on the line snapping a small shake takes place by changing the power and time parameters, then the main render loop just needs to call the tick function:

public Rumble  rumble;
this.rumble = new Rumble();

if (line.tension > line.max_tension){ // LINE SNAP
  gc.rumble.rumble(.2f, .1f); 
  state = STATE.IDLE;
}

if (gameController.rumble.time > 0){
  gameController.rumble.tick(delta, gameController, hero);
}

So there you go a nice feature to add to any game that could do with some atmosphere or excitement, could be progressed much further and also be used in loads of ways, great for explosions, thunder storms etc.

Thanks for reading !_!

LibGDX Lighting – Day / Night cycle

Recently researched the use of a Shader in libGDX to create a simple day/night cycle. Found some basic tutorials to create a fire at night affect including: Lightmap Shader This basically adds a tint to the background and overlays an image to create a spotlight.

Initiating vars etc:

Vector3 bright = new Vector3(6.3f, 6.3f, 6.7f);
// Load shaders from text files
vertexShader = Gdx.files.internal("data/shaders/vertexShader.glsl").readString();
defaultPixelShader = Gdx.files.internal("data/shaders/defaultPixelShader.glsl").readString();
finalPixelShader =  Gdx.files.internal("data/shaders/pixelShader.glsl").readString();

ShaderProgram.pedantic = false;
defaultShader = new ShaderProgram(Art.vertexShader, Art.defaultPixelShader);
finalShader = new ShaderProgram(Art.vertexShader, Art.finalPixelShader);currentShader = finalShader;
ambientColor = bright;
 
finalShader.begin();
finalShader.setUniformi("u_lightmap", 1);
finalShader.setUniformf("ambientColor", ambientColor.x, ambientColor.y, ambientColor.z, ambientIntensity);
finalShader.end();
// Image for spot light 
light = new Texture(Gdx.files.internal("data/shaders/light.png"));
fbo = new FrameBuffer(Format.RGBA8888, 1024, 788, false);

finalShader.begin();
finalShader.setUniformf("resolution", 1024, 788);
finalShader.end();

Render Loop
After setting up the variables and shader files in the render loop I adjusted the ambientColor over time to give affect of night day.

// Adjust ambientColor to give appearance of night/day  
finalShader.begin();
finalShader.setUniformi("u_lightmap", 1);
finalShader.setUniformf("ambientColor", ambientColor.x, ambientColor.y, ambientColor.z, ambientIntensity);
finalShader.end();

// I added logic to only show spotlight during night
if(show_light){
  fbo.begin();
  fbo.getColorBufferTexture().bind(1);
  light_batch.setShader(defaultShader);
  light_batch.begin();
  light.bind(0);
  light_batch.draw(light, hero.x-l_off+.4f,hero.y-l_off+.2f, light_size,light_size);
  light_batch.end();
  fbo.end();
}
       
// Draw your map here
light_batch.setShader(currentShader);
light_batch.begin();
MapGenerator.draw(gameController.camera, light_batch);
light_batch.end(); 

Night

 Evening
This solution limited me to using one spot light, also my knowledge of OpenGL Shader language is zero. At this point I went back to the LibGDX documentation and came across Box2dLights, a library that uses collision data from Box2D to create lights/shadows.
// BOX2DLIGHTS
private PointLight spriteLight;
private RayHandler rayHandler;

// Create a new Box2D World, this is required. 
World world = new World(new Vector2(), true); 
RayHandler.useDiffuseLight(true);
  
// Setup the new RayHandler, it will use the same camera as the main game
rayHandler = new RayHandler(world);
rayHandler.setCulling(true);
rayHandler.setCombinedMatrix(gameController.camera.combined);
rayHandler.setAmbientLight(1);
 
// Light to follow the hero
spriteLight = new PointLight(rayHandler, 50);
spriteLight.setPosition(hero.x,hero.y);
spriteLight.setDistance(5);
spriteLight.setColor(3, 12, 33, 0.3f);
// Keep the unique ID of the light  
hero_light = spriteLight.hashCode();

// this lights the map (Sun)  
spriteLight = new PointLight(rayHandler, 50);
spriteLight.setPosition(hero.x-20,hero.y-20);
spriteLight.setDistance(250);
spriteLight.setColor(3, 12, 33, 0.5f);
 
// Test shadow being cast by solid object 
PolygonShape tileShape = new PolygonShape();
tileShape.setAsBox(.5f, .5f);
FixtureDef fixtureDef = new FixtureDef();
fixtureDef.shape = tileShape;
fixtureDef.filter.groupIndex = 0;
BodyDef tileBodyDef = new BodyDef();
float bodyX = hero.x-3;
float bodyY = hero.y-4f;
tileBodyDef.position.set(bodyX, bodyY); 
tileBodyDef.type = BodyType.StaticBody;
Body tileBody = world.createBody(tileBodyDef);
tileBody.createFixture(fixtureDef);

// RENDER LOOP CODE
rayHandler.setCombinedMatrix(gameController.camera.combined, gameController.camera.position.x, gameController.camera.position.y,gameController.camera.viewportWidth, gameController.camera.viewportHeight);
rayHandler.updateAndRender();

Here I set up some basic lights, a small one for the hero and a large light to act as the sun, I added one solid object to show a shadow being cast. Would need to add bodies for each object in the game and update there positions. Here the alpha is set to low on the sun light to give impression of night:

Zoomed out, earlier in the day:
Multiple Lights

Accessing and looping through all lights is simple, we stored the hashcode of the hero light so on each render loop update its position, else change the alpha value; increase/decrease this value to simulate night to day and vice versa.

for (Light light : rayHandler.lightList) {
 if (light.hashCode() == hero_light){
  light.setPosition(hero.x,hero.y); 
 }else{
  light.setColor(1, 1, 1, ambientIntensity);
 }
}