Shuffa Brick game released.

I've just released Shuffa Brick my new physics based Break out game on Google Play.

Shuffa Brick is a new physics based Break-out style game, except you do not use a paddle to hit the ball. You touch the screen slide then release.

Clear all bricks to complete the level.

Shuffa Brick can be played with just the touch of one finger. 

You touch the screen of your phone or tablet, slide back and release. 

This will rebound the ball in the opposite direction. 

See how you rank on Google play leader board.

Unlock all achievements.

One level only included, let me know if you want me to create more.

YouTube trailer for Shuffa Brick

Adding a Font in Unity

So I was getting ready to release a version of my game Shuffa ball: Endless Roller onto game jolt for play testing. So I decided I needed to have text for the menus, I used a font I found in Inkscape and asked myself am I allowed to release a game using this font.
The font is called Showcard Gothic and it appeared it is not free to use commercially. So I needed to find a new font free to use in an application. I came across the site http://www.fontsquirrel.com/ that contains free to use fonts.
There I found this great cartoony font that fits perfectly with the cartoon style of my game. It is called Pusab and here is a picture of the level complete panel featuring the font.

Pusab font on level complete

In unity to use the font is really simple, just place the PUSAB___.otf file in the assets folder, then when using the text click the select font button.

Select font in Unity

Now I have a full level of the game to play, please play it and leave comments. It still isn't finished but it is getting there.

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.

Rhino face-off, bouncy version

In my previous blog I thought to add a rhino to the game as a baddie.
So to recap, I had two versions, one as Rhino/Spacehopper hybrid the other as a proper animated version of a rhino.
This blog will follow my research into how to make the Rhino/Spacehopper hybrid.

Rhino face-off

So looking around in the Unity physics 2D I thought I'd start with the ball. In Shuffa ball I have a script for the ball, a RigidBody2D and a circle collider 2D so I added the same.

Unity editor after adding Rhino script, RigidBody2D and Circle Collider 2D

Then in the script I add code to apply force to the rigidBody2D. This little snipit says if the velocity is less than 5 add I to the force, by putting it in the fixedUpdate as opposed to every frame it does it at a fixed time. If every frame, different machines have different frame rates.

Rhino script in VS2013 Community edition

Here I use VS2013 Community edition, I tried MonoDevelop that comes with Unity, but found the Intellisense a bit flaky. Using Visual Studio at work everyday, I am too used to the Intellisense working and all of the keyboard shortcuts, so I changed to the VS2013 community edition.

Running the scene, everything worked as normal, then I wanted to add the Rhino head, this is where I went looking through various Physics 2D components.

The thing that seemed most obvious to me was the Wheel Join 2D, this seemed what I wanted. I connected my wheel joint 2D from the wheel to the head of my rhino, which seemed the obvious way but it really didn't work as I expected. 

Then I found on the internet that you connect from the head to the the wheel, that was better but again didn't look right. So I added a small wheel at the front of the head. Then for movement you have a motor not the FixedUpdate function above.

It was OK but not the vision I had for my Rhino ball, it was more like a Rhino bike than a Rhino ball.

Click here to see a video of the Rhino motor bike in action.

Rhino bike

Next I tried the Spring Join 2D, this is like car suspension. Added two to the head and then I stopped the head from rotating on the Z axis. This gave more of the effect I was after.

Rhino with 2 Sprint joint 2D

Click here to see a video of the Rhino Hopper

Why not a Rhino?

I was talking about my game with my wife, when I had the idea of a baddie, something with a sharp point who's sole purpose is to burst the Shuffa ball. I thought of a bird with a beak, but my wife said.
"Why not a Rhino?"
So here are a couple of mock ups.

The first is my drawing of a rhino, it reminds me of a film I saw many years ago called "The Gods must be crazy" about a cola bottle being thrown from a plane.
The thing that has stuck with me are the scenes with a Rhino, where it would run towards and stamp out bush fires. I've googled this to see if it is a real thing, but can't find evidence. Anyway here is my Rhino running to stamp out a Shuffa ball.

The second is a Rhino ball, more of a stylised version of a rhino living in the Shuffa ball universe. If you could cross a space hopper with a rhino this is what you'd get.

The rhino too would react to the obstacles so you can ping him out of the way. If you ping him hard enough he'll get stuck to the ceiling.

The rhino ball has the advantage of being easy to animate with less moving parts, but the 4 legged fire marshall could be more dramatic.

Creating scrollable background tiles with Inkscape

In this blog I will go through how I easily created the background tiles for my game Shuffa ball:Endless roller. In playing about with Inkscapes layers I came up with this idea for exporting multiple backgound tiles with no need to line things up.

In unity it seems to me 100px is 1 unit in unity, so I created a rectangle 400px by 1000px, the colour is not important as the rectangles will be below what we want to export later and therefore won't be seen.

Exporting the rectangle now calling it 1.PNG, this will allow all others to have the same name which will make changing the names of the others easier later.

Next we will create duplicates of this rectangle; with the rectangle selected press CTRL+D to duplicate, do this several times. All of the rectangles are in the same place, we want them side by side so we use the Remove Overlaps in the Align and Distribute tab (Ctrl+Shift+A).

So left drag over the rectangles which will select them all then press the Remove Overlaps button.

This should expand to look like below with all aligned with no overlap.

Click on each rectangle and click export PNG, change the name from 2->8.PNG then export them. We do this now as later on we will be batch exporting the 8 tiles and it makes it easier.

The next thing we do is add the actual image we want to export so add a new layer (Ctrl+Shift+L). 

Call this layer Background, whatever we draw in this level is what we want to be exported. 

Rename Layer 1 as tiles.

After finishing the drawing on the background layer, we want to hide this level. To do that click on the little eye icon in Layers tab which will hide the background level.

This should leave all of the tiles visible on the tiles Layer, so select all of the tiles.

Then when you click again on the eye on the background level, you will see your background drawing with the tiles selected underneath.

The next stage is to batch export the selected objects. Make sure "Hide all except selected" is NOT selected. If you did that you will get the grey rectangles exported.

Click the export and we should see 1->8.PNG exported.

You can see these background tiles in action by visiting my Game Jolt page that has a playable demo,

or look at this video.

Shuffa ball: Endless Roller

After writing Shuffa ball it gave me the idea for another game. It will be an endless runner style game but with a ball, so I’m calling it Endless Roller.

It will use the same physics as Shuffa ball, but with a play area much, much wider. Endless in fact.

The process of writing this game I’ll document in this blog, most decisions regarding the game I haven’t made yet.

GamePlay

The gameplay is made up of multiple obstacles, when you touch and slide down on an area of the screen; the obstacles come down with you. Then, when you release they snap back into place, applying a force to the ball.  For the obstacles I use object pooling, a number are created at start-up but are inactive. Then when needed they are set as active off screen to the right and move into the frame as the camera follows the ball. Then when they go off screen to the left they are set as not active ready to be reused later.

Click here to see a video of this in action.

The ball tries to maintain a constant velocity, if it is going slower than X then force is added; if faster that is OK, that speed will naturally be lost through bouncing against the obstacles.

I haven’t yet decided on the purpose of the game.

What stops the game, how do you die or run out of time.

What is the goal, is it a distance or completing an action.

Hi scores are they points or time to complete.

Backgrounds

Here it will tile the various backgrounds, as we move to the right it will take the background tile A and place it next to the E.

To do this we need to have a trigger point in each tile that says if the tile goes off screen to the left move it all the way to the right, which will be off camera so we won’t see it happen.

The ball will be followed by the main camera. The tiles in the background will move at a slower speed than the foreground, this is called parallax scrolling.

We can create multiple levels of background, the furthest from the camera being the slowest, nearer the camera progressively faster.

Like Shuffa ball, Endless roller will be written in Unity, here is how the backgrounds look in the Unity editor.

Click here to see the background scrolling in action.

I have a playable demo of the game so far. It is on Game Jolt, I'll be updating this every now and again as this blog progresses.