November 10, 2014 at 00:23Five character runner for iOS
Hi, Habr!
It so happened that I have been developing for iOS for quite some time, but the thing is - I never wrote a game. After the snake at 13 years old, under the IBM 386, there was a break until 2014, when I gained strength to make a warm tube dream a reality. What came of it? The graphics were as follows:
And the gameplay I wanted to make look like this:
If interested, please under the cut! (many pictures!)
The project is non-profit, without purses, advertising and SMS, and at the current stage it is more like a concept. Perhaps the second picture is familiar to the readers of the Habr - one fine day I saw it in this post , yes, my enthusiastic comments. First, a few words about the graphics.
Fortunately or unfortunately, I am an ordinary programmer and I draw quite patheticly, so I had to look for an artist. And what budget can a married man offer for his amusement? Well, it turned out to be about $ 1000 in the end, but of course this would not be enough for a professional game artist, so after a while I went out to a girl who paints pretty well in watercolor, but did not see Photoshop. We started with the background and, since I always wanted to make horror, creepy trees. Scans came out like this (pictures are clickable):
The last scan, the platform, reminded me somehow of the first StarCraft in terms of color scheme. And so I liked this watercolor, that I decided not to translate it into a vector and leave it as it is, having cut and slightly retouched in Photoshop. As a result, out of many sketches in the game, 13 types of trees, 2 variations of platforms and 5 characters appeared, for which the player is invited to play simultaneously. In paper, it looks like this:
C characters turned out to be more difficult. Of the many, many options for children, we chose a very long time. Initially, I didn’t even know how many there would be - with the keys it turned out more natural, but on the iPhone screen there is not so much space as on the midi-keyboard. After long experiments there were 5 of them left. The whole list barely fit on the photo:
After summarizing everything, the screenshot with the winners looks like this:
All the characters were given nicknames, for example the most skinny one - Auschwitz. Someone was named after the resemblance to colleagues. It was difficult with animation, I even had to redo Auschwitz (in the current version it twitches like a paralytic, in version 1.1 I will pour the updated one). I brought everything together in layers in Photoshop, checked it with animated gifs. It took about 3 hours to mix and cut one character:
But I am very pleased with the result. Of course, modern designers and animators reproached the small FPS animations - it consists of eight frames for each player - but the pictures turned out to be very similar to the cartoons of the 20-30s of the last century:
It immediately became interesting to me - did all these points, strokes, scuffs appearing on frames appear in old cartoons due to film aging, or, as in our case, from random pencil movements on paper? After all, they did not have a concept of post-production, the pictures were most likely taken and glued as they were. If anyone has information or thoughts, please share in the comments.
Initially, I developed a fully working prototype on Cocos2D + Box2D, but I did not like a few nuances:
As a result, I rewrote everything on SpriteKit (and, what I have the right, the project is mine), and as a physics I wrote a primitive engine - no more than what is required for the 2D runner, 100 lines. There is nothing interesting or new in it, any programmer will write the same in a day. But the units of measurement from spherical in a vacuum turned into pixels per second and per second squared - it’s quite nice to work with such, unlike meters abstract for the device :)
But I had to tinker with the world notably - initially I wanted to write an endless scroller with an auto-generated world, which gave me a lot of pleasant and not very impressions. All layers of the visible world are randomly generated, according to certain laws, in some of which (for example, the algorithm for generating trees in the background) I still can not figure out. The code is replete with magic constants of the form “three roots from two to two”, which over time have lost their meaning for me - but it looks cool! Probably, it would be worth writing a separate article about it.
I also made a pretty cunning parallax of trees - when you turn the phone in your hands, they depict a 3D effect. I added an invisible view, the parallax of which is calculated by iOS itself, and for each tick of the game I read the delta of its coordinate, which I multiply by the distance of the tree from the user (1 - the farthest, 0 - the closest) and add to the tree (X; Y). It turns out pretty nice and productive.
By the way, I also had to tinker with performance pretty much, but it’s more out of inexperience - for example, the biggest brake was that I turned to the UIKit element on each redrawing cycle. I finally understood why game engines have their own buttons and labels! But I, an ignoramus, made a HUD on regular iOS controls.
I was introduced to music by the leader of a Belarusian rap group for a nominal fee of 1 can of grandma’s adjika, which he has loved since studying at the institute. In my opinion, it is beautiful in itself (both music and adjika). The rest of the sounds were found by our tester Igor on the stocks, for which many thanks to him as well as to everyone who helped me in creating the toy. I almost forgot, link to the app , enjoy the game! I will be glad to every comment!
UPD: on the video gameplay link .
It so happened that I have been developing for iOS for quite some time, but the thing is - I never wrote a game. After the snake at 13 years old, under the IBM 386, there was a break until 2014, when I gained strength to make a warm tube dream a reality. What came of it? The graphics were as follows:
And the gameplay I wanted to make look like this:
If interested, please under the cut! (many pictures!)
The project is non-profit, without purses, advertising and SMS, and at the current stage it is more like a concept. Perhaps the second picture is familiar to the readers of the Habr - one fine day I saw it in this post , yes, my enthusiastic comments. First, a few words about the graphics.
Graphics
Fortunately or unfortunately, I am an ordinary programmer and I draw quite patheticly, so I had to look for an artist. And what budget can a married man offer for his amusement? Well, it turned out to be about $ 1000 in the end, but of course this would not be enough for a professional game artist, so after a while I went out to a girl who paints pretty well in watercolor, but did not see Photoshop. We started with the background and, since I always wanted to make horror, creepy trees. Scans came out like this (pictures are clickable):
The last scan, the platform, reminded me somehow of the first StarCraft in terms of color scheme. And so I liked this watercolor, that I decided not to translate it into a vector and leave it as it is, having cut and slightly retouched in Photoshop. As a result, out of many sketches in the game, 13 types of trees, 2 variations of platforms and 5 characters appeared, for which the player is invited to play simultaneously. In paper, it looks like this:
C characters turned out to be more difficult. Of the many, many options for children, we chose a very long time. Initially, I didn’t even know how many there would be - with the keys it turned out more natural, but on the iPhone screen there is not so much space as on the midi-keyboard. After long experiments there were 5 of them left. The whole list barely fit on the photo:
After summarizing everything, the screenshot with the winners looks like this:
All the characters were given nicknames, for example the most skinny one - Auschwitz. Someone was named after the resemblance to colleagues. It was difficult with animation, I even had to redo Auschwitz (in the current version it twitches like a paralytic, in version 1.1 I will pour the updated one). I brought everything together in layers in Photoshop, checked it with animated gifs. It took about 3 hours to mix and cut one character:
But I am very pleased with the result. Of course, modern designers and animators reproached the small FPS animations - it consists of eight frames for each player - but the pictures turned out to be very similar to the cartoons of the 20-30s of the last century:
It immediately became interesting to me - did all these points, strokes, scuffs appearing on frames appear in old cartoons due to film aging, or, as in our case, from random pencil movements on paper? After all, they did not have a concept of post-production, the pictures were most likely taken and glued as they were. If anyone has information or thoughts, please share in the comments.
Programming
Initially, I developed a fully working prototype on Cocos2D + Box2D, but I did not like a few nuances:
- From the perspective of Box2D, each player is a box. If only one player were running, some flaws and errors of physics miscalculation would have been simply invisible, and with the simultaneous running of five players in arbitrary time sections, the distance between them would decrease by a couple of pixels, then increase. I couldn’t figure out what it was connected with, but I found on the Internet information that such complex engines should not be used in runners for at least this reason - it turns out that I was not the only one who came across this rake;
- I didn’t really like Cocos2D because of its weak encapsulation - in SpriteKit the code is shorter and more understandable, due to the absence of a HUGE_OPENGLES3_CONSTANT and other direct OpenGL calls that sometimes reminded me of a WinAPI nightmare - you need to know it thoroughly or smoke a bunch of documentation and forums, which ultimately lead to a thorough knowledge of the huge number of constants, without which I live well.
As a result, I rewrote everything on SpriteKit (and, what I have the right, the project is mine), and as a physics I wrote a primitive engine - no more than what is required for the 2D runner, 100 lines. There is nothing interesting or new in it, any programmer will write the same in a day. But the units of measurement from spherical in a vacuum turned into pixels per second and per second squared - it’s quite nice to work with such, unlike meters abstract for the device :)
But I had to tinker with the world notably - initially I wanted to write an endless scroller with an auto-generated world, which gave me a lot of pleasant and not very impressions. All layers of the visible world are randomly generated, according to certain laws, in some of which (for example, the algorithm for generating trees in the background) I still can not figure out. The code is replete with magic constants of the form “three roots from two to two”, which over time have lost their meaning for me - but it looks cool! Probably, it would be worth writing a separate article about it.
I also made a pretty cunning parallax of trees - when you turn the phone in your hands, they depict a 3D effect. I added an invisible view, the parallax of which is calculated by iOS itself, and for each tick of the game I read the delta of its coordinate, which I multiply by the distance of the tree from the user (1 - the farthest, 0 - the closest) and add to the tree (X; Y). It turns out pretty nice and productive.
By the way, I also had to tinker with performance pretty much, but it’s more out of inexperience - for example, the biggest brake was that I turned to the UIKit element on each redrawing cycle. I finally understood why game engines have their own buttons and labels! But I, an ignoramus, made a HUD on regular iOS controls.
Conclusion
I was introduced to music by the leader of a Belarusian rap group for a nominal fee of 1 can of grandma’s adjika, which he has loved since studying at the institute. In my opinion, it is beautiful in itself (both music and adjika). The rest of the sounds were found by our tester Igor on the stocks, for which many thanks to him as well as to everyone who helped me in creating the toy. I almost forgot, link to the app , enjoy the game! I will be glad to every comment!
UPD: on the video gameplay link .