Sunday, August 30, 2015

Desert Tile Set for Endless Roller

Here for my game in development, Endless Roller, I've updated it to use's desert tile set.
It just adds the professional quality.

I was sick at looking at my done in 5mins crappy artwork and saw that the site has a number of freebies to use.

To use in my game I used Inkscape and did as I explained in my blog creating scrollable background tiles. I increased the number of tiles used by 5 as I thought it looked better in the game. I added a new layer called Desert, this means I just hide my old background layer and Inkscape will only export the desert layer. If I want to go back and use the crappy versions I can unhide the desert layer and show the original background layer.

Background tiles selected ready for export.

This background is much taller than the other backgrounds. This is because I've changed the game so that the camera will follow the Rhino as he goes up in the air.

Middle background layer

Front background layer

video on Youtube of the new desert tile set in action.

Monday, August 17, 2015

New Main menu for Shuffa ball

I decided to update the UI of my original game Shuffa ball. Previously there was 21 levels in one large scroll rect and it often seemed slow on startup.

So the idea is to have a main menu from which we can choose one of the 5 campaigns. It should also have the Settings and About links as well as an Exit button.

So in Inkscape I went about creating the assets to be used.

First off there needs to be a background, one of the filters I use in the design of the game graphics is Bevels->Combined Lighting. So what I do is apply that filter to the background then cut-out the buttons which gives a nice sunken feeling to the buttons.

To do a cut-out, make a shape on top of the background then Path->Difference (Ctrl+-).

 Here is how my main menu looked after all of the cut-outs.

I then hooked up all of the buttons for the level selection, they all call the old main menu, but I set which difficulty level is to be used.

New Main menu in action.

Then in the old a subset of the levels is displayed.

 Easy levels selected

By splitting the menu system into 2 Screens, I believe the menu system is simple on the main menu and is less cluttered on the level selection.

Wednesday, August 12, 2015

Self bouncing balls

To make the game more interesting, I’ve decided to have the balls bounce along too.

They also will use the floor to jump, when they are just about to come into contact with the floor it deforms beneath them, then they let go launching the ball into the air.

To do that we have the balls look down and to the right, when we detect that the ball is going to come into contact with a floor tile, we send that floor tile a message to start sliding down. It will then slide down the adjacent floor tiles too.

Ball being launched by the floor

Code sending the message to the collider to start swipe down

Here is a video of the balls bouncing by themselves.

Wednesday, August 5, 2015

Rhino animations and transitions

To the Rhino sprite I want to add 3 things.

  • A sprite to represent the dust as the wheel turns on the ground.
  • A Dust explosion when the ball takes off and lands.
  • The third is more difficult I want the whole Rhino sprite to be angle differently when it takes off and lands.

Rhino Revving, taking off and landing

Revving Sprite

This blog will be about adding the revving sprite to the Rhino ball.

Again I’m going to use Spriter by BrashMonkey, and the Dust.scml from the Game effects artpack.

It has 2 animations the Rev sprite and the landing sprite, I’ll export them to separate PNG files like I did previously. Then drag them onto the hierarchy to create the animation.

If we were to attach to the wheel as a child the rev sprite would rotate with the ball. We could attach the sprite to the Rhino head as that is doesn’t move much but as with the flame sprite I’m going to use the Update function to position relative to the centre of the ball.
Unlike the flame sprite we need to apply an offset as the rev needs to appear on the left of the Rhino ball. To find the offset make the Rev temporarily a child of the Rhino ball then move to the ideal position, store the transform position as this is what we’ll add in the Update function. Remembering to move the Dust_000 from the RhinoBall hierarchy.

adjusting the transform of the Rev sprite

adding the sprite to the Rhino script

So the Rev sprite now works and is well positioned but the problem is when the Rhino jumps and is airborne there shouldn’t be dust revving. So as with the flame in the previous blog we will RayCast down from the centre of the ball to see when we lose contact with the ground.
If we lose contact we set active of the Rev GameObject to false, in the future we will transition from the Rev sprite to the take-off sprite but this will do just now.

Tuesday, August 4, 2015

Rotation of the flame sprite

In my previous blog, I hinted that we wanted to rotate the flame, the idea is that when falling we want the flames above the Shuffa ball, with an upwards motion the flames below and when on the ground the flames to the left of the ball.


Shuffa ball with rotated flame

To do this we need to know when the ball is in contact with the ground, and if airborne whether the trajectory is upwards or downwards.

To see if the ball is in contact with the ground we will use RayCasting, we will cast an invisible line down a certain distance from the centre of the ball; if it collides with a piece of floor then we return true saying it is grounded.

With RayCasting we need to use layers, these layers separate the different object types. If we didn’t then the RayCast will always return true as it casts from the centre of the ball down to outside the circle collider, thus hitting the collider and returning true.
We will assign all of the floor sprites to the Floor layer, then when RayCasting we tell it to only search the Floor layer.

To set up the Floor layer click Layers->Edit Layers, then add the Floor layer to one of the User Layers.
adding the Floor layer
Next assign the floor tile to the Floor Layer.
assign the floor sprite to the Floor layer
To work out whether the ball is falling or on an upward trajectory we compare the current transform position with the previous frame. Then adjust the angle accordingly. When adjusting the angle we don't want it to change immediately but have a smooth transition, that is where the Slerp function comes in.

Video of the ball flame rotation in action

Saturday, August 1, 2015

Bouncy fire-starter

As I've chosen a Rhino and as we all know they live to put out fires, I've now come up with a goal of the game.
The Shuffa ball instead of being the main player becomes the fire-starter, bouncy fire-starter. The Rhino then has the task of putting these fires out.

For the animation of the fire I use a package I bought called Spriter by BrashMonkey, when I bought it all of the artpacks were included. It is free to try and I do recommend it.
The one I am going to use comes from the Game effects pack and is called flame.scml.
Once opened; Click File->Export Animation to PNG.

Export animation

Then I set the size to 200% and the number of frames to export, in my case 9. You obviously will play about with these figures depending on the project. 

Exporting flame frames

These need to be exported into a directory inside the Assets directory of the unity project. Then to create the animation you drag all of the images onto the Hierarchy, this creates the animation. One thing I like to do is un-check the "Generate mip-maps", I'm not sure what this is for but it just seems to create a lesser quality animation.

Drag images to Hierarchy

Now to make the flame follow the ball:
If you drag the flame onto the ball it becomes a child of that object and therefore as the ball rotates the so will the flame animation. Not the effect I'm after, so we need to create a script that as the ball moves the flame animation is also moved.
To do that we create in the ball script we a public GameObject that in the update we change the transform position to match that of the ball.

Ball script with GameObject

Back in the unity editor drag the flame_007 object into the fire, make sure the flame object is no longer a child of the ball.

Now we have a flame object that follows the ball, because the flame animation is much taller the middles do not line up.
Misaligned images

In the Update of the ball we could add an offset to the transform position but later on I want to change the rotation of the flame depending on whether it is airborne or rolling on the ground. So the easiest way is to change the pivot point of each frame in the animation.
Navigate in the Project to the directory where the individual PNG files are store then click on each on and in the sprite editor change the pivot point.

Changing pivot point of each sprite

Aligned ball and flame.