Where the Pixie Unicorn lives. Indie storytelling
Always with curiosity I read the next story from indie developers. About how the idea was born, what path was traveled and what eventually happened. I want to share my story of creating a very simple but dynamic game. Since the technical part will be covered, it may be interesting for people who want to make their game, but have not decided on the platform.
Not so long ago, a series of articles on the creation of a platform for html5 per hour were released on Habré. In one of them, the author reached the working prototype and put the demo on public display. The square character jumped from platform to platform moving horizontally. In general, nothing new, the essence of these articles was more technical than about the gameplay. Having just jumped, I clearly presented the gameplay that made the game dynamic - each platform must be a little higher than the previous one and the speed value should gradually increase. Thus, the player will be forced more and more accurately to make jumps in order not to trip over the next platform. Having played in my mind at this version of the runner, I felt inspired and immediately opened the code editor. It took about 2-3 hours to create a prototype.
It looked like a prototype of the game:
')
I also decided to look at how these toys are implemented. Having established the order of 10 games, I did not find one similar to the one that I imagined to myself. That tasteless graphics, sluggish gameplay, where there was no excitement or dynamism. So the decision was made - to bring the prototype to release, making a game that I would like to play myself.
“Let it remain so,” said the passion for minimalism. Let the character remain a square, color the platforms with soft colors - everything, nothing superfluous. The winner is determined by the highest number of jumps per round. Looking ahead to say that the release happened only after 4 months and I had no idea how much the appearance and gameplay would transform.
“Something is missing,” said my girlfriend. And really not enough ... design ideas. Dynamism and excitement have already appeared, but the jumping square did not cause confidence. It was decided to revive the character and create a characteristic world for him! The idea of ​​a unicorn came randomly, or the subconscious influence of a favorite smiley on Facebook - a cat with a rainbow horn and a tail. Wanting to leave the spirit of minimalism, pixel art was chosen and the role of the designer fell to the lot of the girl. I turned out to be a very pedantic and meticulous “customer”, I received a positive experience in searching for compromises. And now, after a dozen other variants of drawing the main character, our unicorn Pixie was chosen:
Since I am a flasher with more experience, the question behind the choice was not, Adobe Air allows you to solve much more complicated tasks. A complete object-oriented language (ActionScript) and a lot of development tools have been holding me back for 5 years now. The ability to work directly with the GPU, write your shaders - this all allows you to create games that require high performance. And native extensions easily allow you to connect third-party libraries written in Java or ObjectiveC. It is also worth mentioning the cross-platform. Desktops, mobile, browsers, for all of this, you can build an application from one project, regardless of whether you have Windows or MacOS installed.
To create the game, 3 basic frameworks were chosen:
- Starling . Implements the display list application architecture. Sprites, animations, particles, effects. All content is rendered directly using the GPU.
- Feathers . This is our interface. Implements components such as buttons, lists, sliders. In general, a convenient ever-evolving engine with a large community. Component skining is made easy, but it takes time to figure out the device.
- Nape . Physics. Immediately you can view the demo here . Like the informative debug-rendering of the world. It looks like box2d but is more optimized for flash. Works smartly, the threshold of entry is low.
The project is based on the principles of MVC. For a more convenient implementation of this design approach, a fairly well-known framework called Robotlegs is used .
Once again I want to note that flash has the ability to connect native extensions to execute native code (whether it is Java or Objective C) and, accordingly, you can use different SDKs (Facebook, AdMob, Google Analytics, In-app Billing etc). In fact, in the code, they are accessed via interfaces, and depending on what target the code compiles, either Java or the ObjC library will be used automatically. For example, to initiate a purchase in the code of all, there is one method:
It is very convenient. You can write such extensions yourself or use paid / open-source strangers.
In general, creating a very simple flash game using Starling will require not so much knowledge and experience, a lot of tutorials and videos have been created on this topic. But if you want to do more serious things you will need to understand more deeply. You will learn how the GPU works, what are shaders, buffer and draw calls. This also applies to any other programming language - if you want to make a complex game, then you need to delve into the very basics of how everything works and how to use it most optimally.
Each jump adds 20 points to the player. This will determine the winners table. But this was not enough, I wanted to dilute the situation with additional opportunities to earn points. So cherries appeared. But the cherries are not simple, their arrangement has been balanced for a very long time so that when trying to reach each one sometimes there is a danger of losing. The player must have time to analyze whether or not to jump for the cherry, it added another skill, in addition to the calculations of the jumps themselves. But this was not enough! Then the idea to add another bonus - hearts. But hearts should have been different from cherries. We hung them up much higher and decided that Pixie should be provided with another super jump. And the super jump itself is given only after eating 3 cherries. On the one hand, cherries and hearts add excitement to the game, motivating to improve jumping skills, since collecting 3 cherries and making a super jump will not be such an easy task. And on the other hand, it may introduce ambiguity into the very essence - the player may not notice that the main drive is from jumps and acceleration, rather than from collecting bonuses. However, they decided to leave both hearts and cherries, which is more interesting with them. And yes, in order to protect and give the magic unicorn a chance not to lose after a super-jump hitting the sharp corner of the platform, we endow it with the ability to create a magic sphere around us!
The design was drawn for a resolution of 2560x1600 pixels. The elements were assembled into atlases, and the atlases were driven out into three sets of files for different screen sizes. If your game has a lot of atlases, you can use the texture format developed by Adobe , which allows you to fill the whole thing straight into the GPU and take up less memory than textures created from PNG files. Such textures are loaded into gpu faster, they increase productivity, but there is also a downside - loss of quality. In my case, there were not many atlases and everything worked out in the usual PNG format. To create a warm lamp atmosphere, I decided to use the scanline filter, it worked out well. Animation of the Day shift to the starry Night also fills the game with a special mood.
Draw all long and carefully. There is no limit to perfection and we didn’t strive to achieve it, we wanted to do it neatly, minimalistly, colorfully and a little childishly. Tip: for pixel art, it is especially important from the very beginning to stick to the size of the pixel grid for all design elements.
Sounding the game is a very important moment, and a lot of time was spent on the selection of the desired sounds. The part was created in Bfxr and the part was downloaded from https://freesound.org/ and http://opengameart.org/ . We ourselves write music in the style of chill-out and at first thought that without problems we would make a background composition. But no, writing in 8bit style turned out to be unusual and nothing happened right away. Found a suitable melody in the network, according to the license, it was required to add the author of the track to the project description, which was done.
After several weeks of balancing the world, the logic of the emergence of bonuses, the influence of increasing speed on the platforms and the selection of parameters of the physical world and its objects, I got a pleasant runner that I really liked to play. The first thoughts about the release came out ... as one evening the idea did not appear to dilute the route with an additional obstacle. As a result, it was decided to alternate the steps with a flat plot with the snails crawling there, which will need to be jumped over. Started drawing options snails. Invented - done. And now Pixie rushes through the surprised slugs! Interestingly, I liked the new style of play.
Again, this was not enough, I wanted to add a third distinctive type of game. Without thinking twice, I remembered that the physics engine realizes a good liquid. Made - added marine area. Here Pixie jumps over logs every now and then trying to slip into the water or not jump. Emulation of the fluid, I note very much, if you make the jump while the submerged log pops up, you feel an additional acceleration to the jump, it forms another skill - using the elasticity of the logs for more accurate jumps.
And again, a lot of time was spent on thoroughly calibrating everything that is configured in the game. It was necessary to achieve such complexity, which would be pleasant, but not freeze simplicity. Although the game as a whole turned out to be a bit tense, constantly demanding the utmost concentration and attention on the process. It was interesting to see how when changing certain parameters, the style of the game changed, how physics changed the player's mood. Two new features appeared: the ability to choose a starting speed from three levels, the ability to run in the opposite direction. The latter makes an interesting effect in the brain, I think someone will try. So, the game needs accurate, high-quality balancing. Made by
In connection with the approaching NG, it was decided to add the Winter World, which the user will open by collecting 300 hearts. Here Pixie jumps over the penguins, crosses the sea on ice and climbs up the icy rocks. On the character's head is now a red cap, so to speak, just some kind of Santa Claus. We also tried to add various animations when collecting bonuses and pop-up messages during the game, we realized that it distracts from obstacles, and we removed them.
Everything is standard here. Ad (AdMob), with a paid option to turn it off. Occasionally, please put a rating, like a page on Facebook. Google Analytics for viewing statistics. And most importantly - Leaderboards. At the moment, my record has already been bypassed. It's nice that someone felt the whole idea! Frankly speaking, I don’t strive to set a new record, although I can, since I’ve been thoroughly pumped up during the development. Players should have a chance to get the championship and feel the sweet taste of victory!
There are a lot of tutorials written about how to release an application to the storage. I note that the App Store is much more confusing and in my opinion has a not very friendly interface. And yes, at the appstore we are waiting for a check, they also have New Year's holidays scheduled, so a quick exit is not expected there. As a result, the development of the entire game took 4 months. Given that it was possible to engage in it only during off-hours, in the evenings and on weekends. Constantly I want to add new features, be it clear tutorials or new worlds like a dungeon. But now there is not enough free time. Perhaps, if it is claimed, the game will have further development.
At the moment it is difficult to assess the situation. It was bought quite a bit of motivated traffic, more for interest, see how it works. Thus were obtained the first installs and review. But the most effective way to advance has become AdMob, since the game is set by real gamers. We also distribute among friends, community, facebook. Periodically, there are players who evaluate the aesthetics of gameplay, and some ask questions why Pixie jumps so low ... I think you should talk about the statistics in three weeks or even a month. But already now it is interesting to watch single players. They play, they change speeds, they like FB, sometimes they write a review and give a rating.
For myself I will say that I am very pleased with the result. The first self-made game, albeit very simple. A lot of experience has been gained in both technical and social aspects. In general, all this is very joyful. Imagine what a buzz get developers of large projects.
Not so long ago, a series of articles on the creation of a platform for html5 per hour were released on Habré. In one of them, the author reached the working prototype and put the demo on public display. The square character jumped from platform to platform moving horizontally. In general, nothing new, the essence of these articles was more technical than about the gameplay. Having just jumped, I clearly presented the gameplay that made the game dynamic - each platform must be a little higher than the previous one and the speed value should gradually increase. Thus, the player will be forced more and more accurately to make jumps in order not to trip over the next platform. Having played in my mind at this version of the runner, I felt inspired and immediately opened the code editor. It took about 2-3 hours to create a prototype.
It looked like a prototype of the game:
')
Let's hit the road
I also decided to look at how these toys are implemented. Having established the order of 10 games, I did not find one similar to the one that I imagined to myself. That tasteless graphics, sluggish gameplay, where there was no excitement or dynamism. So the decision was made - to bring the prototype to release, making a game that I would like to play myself.
“Let it remain so,” said the passion for minimalism. Let the character remain a square, color the platforms with soft colors - everything, nothing superfluous. The winner is determined by the highest number of jumps per round. Looking ahead to say that the release happened only after 4 months and I had no idea how much the appearance and gameplay would transform.
“Something is missing,” said my girlfriend. And really not enough ... design ideas. Dynamism and excitement have already appeared, but the jumping square did not cause confidence. It was decided to revive the character and create a characteristic world for him! The idea of ​​a unicorn came randomly, or the subconscious influence of a favorite smiley on Facebook - a cat with a rainbow horn and a tail. Wanting to leave the spirit of minimalism, pixel art was chosen and the role of the designer fell to the lot of the girl. I turned out to be a very pedantic and meticulous “customer”, I received a positive experience in searching for compromises. And now, after a dozen other variants of drawing the main character, our unicorn Pixie was chosen:
Platform
Since I am a flasher with more experience, the question behind the choice was not, Adobe Air allows you to solve much more complicated tasks. A complete object-oriented language (ActionScript) and a lot of development tools have been holding me back for 5 years now. The ability to work directly with the GPU, write your shaders - this all allows you to create games that require high performance. And native extensions easily allow you to connect third-party libraries written in Java or ObjectiveC. It is also worth mentioning the cross-platform. Desktops, mobile, browsers, for all of this, you can build an application from one project, regardless of whether you have Windows or MacOS installed.
To create the game, 3 basic frameworks were chosen:
- Starling . Implements the display list application architecture. Sprites, animations, particles, effects. All content is rendered directly using the GPU.
- Feathers . This is our interface. Implements components such as buttons, lists, sliders. In general, a convenient ever-evolving engine with a large community. Component skining is made easy, but it takes time to figure out the device.
- Nape . Physics. Immediately you can view the demo here . Like the informative debug-rendering of the world. It looks like box2d but is more optimized for flash. Works smartly, the threshold of entry is low.
The project is based on the principles of MVC. For a more convenient implementation of this design approach, a fairly well-known framework called Robotlegs is used .
Once again I want to note that flash has the ability to connect native extensions to execute native code (whether it is Java or Objective C) and, accordingly, you can use different SDKs (Facebook, AdMob, Google Analytics, In-app Billing etc). In fact, in the code, they are accessed via interfaces, and depending on what target the code compiles, either Java or the ObjC library will be used automatically. For example, to initiate a purchase in the code of all, there is one method:
IABHelper.makePurchase("winter_world") It is very convenient. You can write such extensions yourself or use paid / open-source strangers.
In general, creating a very simple flash game using Starling will require not so much knowledge and experience, a lot of tutorials and videos have been created on this topic. But if you want to do more serious things you will need to understand more deeply. You will learn how the GPU works, what are shaders, buffer and draw calls. This also applies to any other programming language - if you want to make a complex game, then you need to delve into the very basics of how everything works and how to use it most optimally.
Gameplay
Each jump adds 20 points to the player. This will determine the winners table. But this was not enough, I wanted to dilute the situation with additional opportunities to earn points. So cherries appeared. But the cherries are not simple, their arrangement has been balanced for a very long time so that when trying to reach each one sometimes there is a danger of losing. The player must have time to analyze whether or not to jump for the cherry, it added another skill, in addition to the calculations of the jumps themselves. But this was not enough! Then the idea to add another bonus - hearts. But hearts should have been different from cherries. We hung them up much higher and decided that Pixie should be provided with another super jump. And the super jump itself is given only after eating 3 cherries. On the one hand, cherries and hearts add excitement to the game, motivating to improve jumping skills, since collecting 3 cherries and making a super jump will not be such an easy task. And on the other hand, it may introduce ambiguity into the very essence - the player may not notice that the main drive is from jumps and acceleration, rather than from collecting bonuses. However, they decided to leave both hearts and cherries, which is more interesting with them. And yes, in order to protect and give the magic unicorn a chance not to lose after a super-jump hitting the sharp corner of the platform, we endow it with the ability to create a magic sphere around us!
Arrived in time design
The design was drawn for a resolution of 2560x1600 pixels. The elements were assembled into atlases, and the atlases were driven out into three sets of files for different screen sizes. If your game has a lot of atlases, you can use the texture format developed by Adobe , which allows you to fill the whole thing straight into the GPU and take up less memory than textures created from PNG files. Such textures are loaded into gpu faster, they increase productivity, but there is also a downside - loss of quality. In my case, there were not many atlases and everything worked out in the usual PNG format. To create a warm lamp atmosphere, I decided to use the scanline filter, it worked out well. Animation of the Day shift to the starry Night also fills the game with a special mood.
Draw all long and carefully. There is no limit to perfection and we didn’t strive to achieve it, we wanted to do it neatly, minimalistly, colorfully and a little childishly. Tip: for pixel art, it is especially important from the very beginning to stick to the size of the pixel grid for all design elements.
Add sounds
Sounding the game is a very important moment, and a lot of time was spent on the selection of the desired sounds. The part was created in Bfxr and the part was downloaded from https://freesound.org/ and http://opengameart.org/ . We ourselves write music in the style of chill-out and at first thought that without problems we would make a background composition. But no, writing in 8bit style turned out to be unusual and nothing happened right away. Found a suitable melody in the network, according to the license, it was required to add the author of the track to the project description, which was done.
Almost finish
After several weeks of balancing the world, the logic of the emergence of bonuses, the influence of increasing speed on the platforms and the selection of parameters of the physical world and its objects, I got a pleasant runner that I really liked to play. The first thoughts about the release came out ... as one evening the idea did not appear to dilute the route with an additional obstacle. As a result, it was decided to alternate the steps with a flat plot with the snails crawling there, which will need to be jumped over. Started drawing options snails. Invented - done. And now Pixie rushes through the surprised slugs! Interestingly, I liked the new style of play.
Again, this was not enough, I wanted to add a third distinctive type of game. Without thinking twice, I remembered that the physics engine realizes a good liquid. Made - added marine area. Here Pixie jumps over logs every now and then trying to slip into the water or not jump. Emulation of the fluid, I note very much, if you make the jump while the submerged log pops up, you feel an additional acceleration to the jump, it forms another skill - using the elasticity of the logs for more accurate jumps.
And again, a lot of time was spent on thoroughly calibrating everything that is configured in the game. It was necessary to achieve such complexity, which would be pleasant, but not freeze simplicity. Although the game as a whole turned out to be a bit tense, constantly demanding the utmost concentration and attention on the process. It was interesting to see how when changing certain parameters, the style of the game changed, how physics changed the player's mood. Two new features appeared: the ability to choose a starting speed from three levels, the ability to run in the opposite direction. The latter makes an interesting effect in the brain, I think someone will try. So, the game needs accurate, high-quality balancing. Made by
Final feature
In connection with the approaching NG, it was decided to add the Winter World, which the user will open by collecting 300 hearts. Here Pixie jumps over the penguins, crosses the sea on ice and climbs up the icy rocks. On the character's head is now a red cap, so to speak, just some kind of Santa Claus. We also tried to add various animations when collecting bonuses and pop-up messages during the game, we realized that it distracts from obstacles, and we removed them.
Additional functionality
Everything is standard here. Ad (AdMob), with a paid option to turn it off. Occasionally, please put a rating, like a page on Facebook. Google Analytics for viewing statistics. And most importantly - Leaderboards. At the moment, my record has already been bypassed. It's nice that someone felt the whole idea! Frankly speaking, I don’t strive to set a new record, although I can, since I’ve been thoroughly pumped up during the development. Players should have a chance to get the championship and feel the sweet taste of victory!
Release
There are a lot of tutorials written about how to release an application to the storage. I note that the App Store is much more confusing and in my opinion has a not very friendly interface. And yes, at the appstore we are waiting for a check, they also have New Year's holidays scheduled, so a quick exit is not expected there. As a result, the development of the entire game took 4 months. Given that it was possible to engage in it only during off-hours, in the evenings and on weekends. Constantly I want to add new features, be it clear tutorials or new worlds like a dungeon. But now there is not enough free time. Perhaps, if it is claimed, the game will have further development.
Result
At the moment it is difficult to assess the situation. It was bought quite a bit of motivated traffic, more for interest, see how it works. Thus were obtained the first installs and review. But the most effective way to advance has become AdMob, since the game is set by real gamers. We also distribute among friends, community, facebook. Periodically, there are players who evaluate the aesthetics of gameplay, and some ask questions why Pixie jumps so low ... I think you should talk about the statistics in three weeks or even a month. But already now it is interesting to watch single players. They play, they change speeds, they like FB, sometimes they write a review and give a rating.
For myself I will say that I am very pleased with the result. The first self-made game, albeit very simple. A lot of experience has been gained in both technical and social aspects. In general, all this is very joyful. Imagine what a buzz get developers of large projects.
Source: https://habr.com/ru/post/275063/
All Articles