Horseshoe for Android

Hi everyone :smile:

I have ported my game Horseshoe for android from Unity to Cocos2d-x

Google Play

This is the first game that I published to Google Play. I had made it in March, and it took me about a week to learn unity and make the game from scratch.

After that I wanted to make my next game, Split and I found cocos2d-x to be a better tool, so I started learning it. It took me approximately a month to learn the basics of cocos2d-x and complete the game.

I really liked working with Cocos2d-x so I decided to port Horseshoe over from Unity. It was really easy to port and the size of the apk reduced from 18MB to 3MB. I also added a jumping effect when the pieces move with just 4 lines of code.

The only problem I had was that the semi-transparent background in the menu was a rounded rectangle in Unity, but I could not find an easy way to replicate that in Cocos2d-x so I used LayerColor to get a plain rectangle.

Sorry for the long post, and I know that my first two games are really simple but my next game is going to be a lot more complex.

P.S. If people are interested I will put up the source code for Horseshoe for beginners to get started.

1 Like

Could you use DrawNode instead of LayerColor?

I have used DrawNode to create the game board, but I’m not sure how I would go about creating a rounded rectangle with it.

I also considered using Scale9Sprite, is that a good idea?

To be honest, I don’t know a lot about Scale9Sprite, can you tell me what you know about it and I will also make sure I understand and add a section to the Programmers Guide.

@iQD @stevetranby @energyy @SonarSystems @mannewalis @nite

What do you all know about Scale9Sprite?

9 slice sprites are generally used in UI for buttons and such. A stretchable are is defined in the centre and the edges are only stretched along one axis while the corners are not stretched at all.

It’s probably the easiest way to get a rounded rectangle, but I would need to use an image file for that. I just wanted to port it as quick as I could so I went with the plain rectangles :slight_smile:

Yes Scale9Sprite is the way to go for UI

A Scale9Sprite is a Sprite consisting of 9 patches/tiles:

  • four corner patches
  • one top patch
  • one bottom patch
  • one left patch
  • one right patch
  • one center patch

The corner patches are fixed and will not be stretched.
The vertical patches (left and right) will only be stretched vertically.
The horizontal patches(top and bottom) will only be stretched horizontal.
The center patch will be stretched vertically and horizontal.

The Scale9Sprite offers upscaled Sprites, which give a uniform look and a non-distorted scaling.
By using different graphics for the edge tiles, rounded buttons with different radii can be produced easily without interfering the scaling itself.
Another advantage is the low resource usage. Depending on gradients or solid coloring for the tiles, which are scaled, only a 1x1 pixel image/texture will be needed to create the asset.

It’s usage is not only buttons, but all kinds of UI elements, like progress bars(also with various border edges like rounded ones).

awesome, I will add to the Programmers Guide!

@slackmoehrle
Could you also clarify how the delimitation zone and cap insets work?

I don’t know that I am the best to ask. Let us ask @nite if he can clear this up for us.

The delimitation zone is the total size/area of the unscaled Sprite.

The cap inset is just the unscaled center tile. Its purpose is to create the edge tiles, which should not be stretched and the horizontal and vertical tiles. It’s the part that cuts the Sprite into a 3x3 grid according to its difference to the delimitation zone.

2 Likes