How was Ylao made? (My article|report of my game with libGdx)

This post is a “copypaste” of my post in redditLibgdx. But I think that could help to someone new in libgdx or in gamedev. Hope you enjoy!! :wink:

First of all I want to comment that here I will expose the process of Ylao from 0 to 100%, so today you can play in your mobile or browser.

https://play.google.com/store/apps/details?id=com.pd.ylao


https://pepdev.itch.io/ylao

What happened?

Ylao started as a simple idea back in September. At first, Ylao was going to be a game to practice more. I did not think about publishing it or anything like that.
That summer I had read a lot about libGdx, but I didn’t practice. Previously, I have practiced andengine, unity, udk (a long time ago) or gameMaker. But I’ve never done anything to consider as a “game”.
In September I started writing code and practicing with flash. For the graphics I was clear the style I wanted to adopt. Kingdom Rush and I found this artist of ironHideGames. He made streams on twitch where he draw something in flash. I “copied” his style by taking a picture of google and draw it by myself, until I knew how to do. That way I learned how to use flash.
In the other hand, it had been a long time since I was writing in Java and I was blocked. So, I decided to read the official libgdx wiki from top to bottom, see the tests and demos and read books of game-design and video game-oriented Java programming. Step by step the game was created and what seemed a simple idea to practice, became, thanks in large part to the graphics, in an idea that could be better.

Tools

  • Gfx > Flash and Inkscape
  • Code > Eclipse, Android Studio, libGdx and Scene2D
  • Sound > FreeSound and free resources (with credits)

ConceptArts

Ylao doesn’t have many sketches since at first I thought to create it to practice. As I improved in the use of the tools, I thought to improve it. The character I liked a lot and saw in JetPackJoyride an example to follow. Obviously, it is not even close to that level, but I agree with Ylao.

Code

The game is divided into 3 screens. Loading, Main, Game. These 3 screens contain the same shared stage to be able to add the flash or the notification of achievement. Main and Game have a stage each to which I add “Root” Tables that contain everything I want to add.
To draw Loading I have used a single class while Game uses a wordDrawer and a worldUpdater. For its part, Main and the menus are made with scene2D.

LoadingScreen

This screen simply contains an animation, a BitmapFont, a rotating image and two rectangles of which one of them changes its width with respect to the load percentage of the assetManager.
Imgur

Transitions

The transition of the screen is a white flash. To create this effect I have just created a splash class that extended to table. A setfillparent (true) and a pixel background (which also served to create the Loading bar) of the color I want, in this case, white.
Imgur

Achievs

Again it is a table. Each time the player changes some stat of preferences or is in-game, it is checked if it has managed to unlock a mission or a trophy and if it has been, it is shown. Missions are only available in the game while trophies are only available in the menus.

MainScreen

Another table with actorAnimation on it. ActorAnimation is a class that extends an actor and creates a simple animation based on an elapsedTime float that changes each delta time. I pass 2 tables. One corresponds to the this-frame-duration, the other corresponds to the frame to show. With this I get the effect of the Ylao title, the moving rat, or the sparking cable.

Menu

Table. The table has many buttons, scrollpanes, stacks… There is nothing complicated here, but it’s like a puzzle. Many simple pieces put together. Another thing, missions are only unlocked and you can only get them if you reach a certain level. The clothes or the stages ¿are worth? (english… jum jum) coins, there are small touchable elements that can have consequences in the game (Ex: If you click on the news you can change the background of a stage for a background of the “end of the world”; You can kill the Doc and you will get a trophy …)




Imgur

Game

The game is about…
A player that can move to the middle of the screen while it is pressed. If it is released, it falls to the corresponding side.
7 or 8 sprites of walls in an arraylist that thanks to Iterator we move, erase and create new ones if necessary.
A static background (Normally with animations)
A dynamic background (no animations) that follows exactly the same process as the walls.
Elements (Can be a fish, a portal, a light). Same pattern.
Items (Coins, lasers, missiles, powers). These items are randomly generated with a given probability between coins, powers or missiles. While the lasers will always be generated one when another disappears from the screen. Finally, while the power of “coins only” will not be generated enemies.
To be able to use the player and have a menu of pause, gameover, etc. An InputMultiplexer with 2 inputs is used. The stage in question and the player input (Class that extends to InputAdapter, I only use touchup and touchdown)
Finally, the game is based on states. STATEPAUSE, STATEGAME, STATEMINIGAME… And for the player, for example… STATEIDLE, STATEJUMP, STATECAPTURED… Also there are global variables like VELOCITY (Items and elements use it) , which increases over time.


Troubles

In general, I haven’t come across any big problem. There are “small and annoying” problems. But nothing that can’t be solved using google. For example, texture filters made the game look bad in the beginning. Animations of actor, jumps or stumbling in the elements, TrueTypeFont incompatibilities… I had to play a lot with viewports so that nothing “strange” happened on different screens. Rookie errors basically, although of course, I don’t remember them all.

Next steps

Good. My next step is to create a good “work environment” to be able to create more games, and more faster.
The next thing I will do, I will be contacting publishers to sell my game and read a lot about it, since I am a “dummy” in that field, but I have to start. If anyone knows publishers or is in that world, please let me know.

END
And that’s the basics. Obviously I can not elaborate because I would write a few sheets but I think I have more or less reviewed everything. If you have any doubts, do not hesitate to ask me. Waoh! 1h edition … Hope you like it!

Gifs HD If you are interested in, I could upload 1Gb of HD gifs