Runner under iOS with five characters
Hi, Habr!
It so happened that I have been developing for iOS for a long time, but what a bad luck - I never wrote a game. After the snake at age 13, under the IBM 386, there was a break until 2014, when I gained strength to make the warm tube dream a reality. What came out of it? The graphics came down like this:
')
And the gameplay wanted to make it look like this:
If interested, please under the cat! (many pictures!)
The project is a non-commercial, without a purse, advertising and SMS, and at the current stage it is more like a concept. Perhaps the second picture is familiar to Habr's readers - one fine day I saw her in this post , yes, my enthusiastic comments. First, a few words about the graphics.
I, fortunately or unfortunately, are an ordinary programmer and draw quite a pity, so I had to look for an artist. And what budget can offer a married man for his razvlelochochki? Well, it turned out about $ 1000 in the end, but of course this would not be enough for a professional game artist, so after some time I went to a girl who paints in watercolors very well, but did not see photoshop in her eyes. We started with the background and, as I always wanted to make horror, eerie trees. The scans came out like this (the pictures are clickable):
The last scan - the platform - so generally reminded me of something the first StarCraft according to the color scheme. And I liked this watercolor so much that I decided not to translate it into a vector and leave it as it is, cutting it out and retouching a little in Photoshop. As a result, out of the many sketches in the game, 13 types of trees, 2 platform variations and 5 characters appeared, for which it is proposed to play simultaneously to the player. In paper, it looks like this:
C characters got harder. Of many, many options for children, we chose a very long time. Initially, I didn’t even know how many there would be - it was more natural with the keys, but there isn’t much space on the iPhone screen as on the midi-keyboard. After long experiments, there are 5 of them left. The entire list barely fit into the photo:
After the information of the entire screenshot with the winners looks like this:
All the characters were given nicknames, for example the most skinny - Auschwitz. Some were named after their resemblance to colleagues. It was difficult with the animation, it was even necessary to redo the auschwitz (in the current version, it twitches like a paralytic, in version 1.1 I’ll take the update). I brought everything in layers in Photoshop, checked it with animated hyphae. 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 a small FPS animation - it consists of eight frames for each player - but the pictures turned out to be very similar to the cartoons of the 20s and 30s of the last century:
It immediately became interesting to me - all these points, shading, scuffs appearing on the frames in old cartoons appeared due to the aging of the film, or just like in ours - from random pencil movements over the paper? After all, they did not have the concept of post-production, the pictures were most likely taken and pasted as is. If anyone has information or ideas, please share in the comments.
Initially, I developed a fully working prototype on Cocos2D + Box2D, but I didn’t like a few nuances:
As a result, I rewrote everything on SpriteKit (and that, I have the right, the project is mine), and as physics I wrote a primitive engine - no more than is required for a 2D runner, 100 lines. There is nothing interesting or new in it, any programmer will write the same for the day. But the units of measurement from spherical in vacuum turned into pixels for a second and a second squared - it’s quite a pleasure to work with such, unlike the abstract meters for a device :)
But I had to tinker with the world notably - initially I wanted to write an endless scroller with an autogenerated world, which gave me a lot of pleasant and not very impressions. All layers of the visible world are generated randomly, according to certain laws, some of which (for example, the algorithm for generating trees in the background) I can not figure out until now. The code is replete with magical constants of the form “three two-by-two roots”, which over time have lost meaning for me - but it looks cool! Probably, it would be worth writing a separate article about it.
I also made a pretty clever parallax of trees - when you turn the phone in your hands, they depict a 3D effect. I added an invisible view whose parallax is computed by iOS itself, and for each tick of the game I read the delta of its coordinates, which I multiply by the distance of the tree from the user (1 is the furthest, 0 is the closest) and add it to (X; Y) the tree itself. It turns out pretty nice and productive.
By the way, I also had to tinker with performance, but more because of inexperience - for example, the biggest brake turned out to be that I turned to the UIKit element on each redraw cycle. Finally, I realized why the game engines have their own buttons and labels! And I, the ignoramus, made a HUD on ordinary iOS controls.
As an acquaintance, the music was written to me by the leader of one Belarusian rap group for a nominal fee to 1 bank of my grandmother's adzhika, whom he has loved since his studies at the institute. In my opinion, it is beautiful in itself (and music, and adzhika). The rest of the sounds were found by our tester Igor on the drains, for which he thanks a lot as well as everyone who helped me in creating the toy. I almost forgot, link to upstor , enjoy the game! I will be glad to every comment!
UPD: on the video link gameplay.
It so happened that I have been developing for iOS for a long time, but what a bad luck - I never wrote a game. After the snake at age 13, under the IBM 386, there was a break until 2014, when I gained strength to make the warm tube dream a reality. What came out of it? The graphics came down like this:
')
And the gameplay wanted to make it look like this:
If interested, please under the cat! (many pictures!)
The project is a non-commercial, without a purse, advertising and SMS, and at the current stage it is more like a concept. Perhaps the second picture is familiar to Habr's readers - one fine day I saw her in this post , yes, my enthusiastic comments. First, a few words about the graphics.
Graphics
I, fortunately or unfortunately, are an ordinary programmer and draw quite a pity, so I had to look for an artist. And what budget can offer a married man for his razvlelochochki? Well, it turned out about $ 1000 in the end, but of course this would not be enough for a professional game artist, so after some time I went to a girl who paints in watercolors very well, but did not see photoshop in her eyes. We started with the background and, as I always wanted to make horror, eerie trees. The scans came out like this (the pictures are clickable):
The last scan - the platform - so generally reminded me of something the first StarCraft according to the color scheme. And I liked this watercolor so much that I decided not to translate it into a vector and leave it as it is, cutting it out and retouching a little in Photoshop. As a result, out of the many sketches in the game, 13 types of trees, 2 platform variations and 5 characters appeared, for which it is proposed to play simultaneously to the player. In paper, it looks like this:
C characters got harder. Of many, many options for children, we chose a very long time. Initially, I didn’t even know how many there would be - it was more natural with the keys, but there isn’t much space on the iPhone screen as on the midi-keyboard. After long experiments, there are 5 of them left. The entire list barely fit into the photo:
After the information of the entire screenshot with the winners looks like this:
All the characters were given nicknames, for example the most skinny - Auschwitz. Some were named after their resemblance to colleagues. It was difficult with the animation, it was even necessary to redo the auschwitz (in the current version, it twitches like a paralytic, in version 1.1 I’ll take the update). I brought everything in layers in Photoshop, checked it with animated hyphae. 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 a small FPS animation - it consists of eight frames for each player - but the pictures turned out to be very similar to the cartoons of the 20s and 30s of the last century:
It immediately became interesting to me - all these points, shading, scuffs appearing on the frames in old cartoons appeared due to the aging of the film, or just like in ours - from random pencil movements over the paper? After all, they did not have the concept of post-production, the pictures were most likely taken and pasted as is. If anyone has information or ideas, please share in the comments.
Programming
Initially, I developed a fully working prototype on Cocos2D + Box2D, but I didn’t like a few nuances:
- From the point of view of Box2D, each player is a parallelepiped. If one player had run, some flaws and errors in the calculation of physics would have been simply imperceptible, and with the synchronous running of five players in arbitrary parts of time, the distance between them would be reduced by a couple of pixels, then on the contrary would increase. With what it was connected, I did not figure it out, but I found information on the Internet that such complex engines should not be used in the runners for at least this reason - it turns out that it was not me who came across this rake;
- I didn’t really like Cocos2D due to its weak encapsulation - in SpriteKit the code is shorter and more understandable, due to the lack of HUGE OF VIEW_OPENGLES3_CONSTANT and other direct OpenGL calls that sometimes reminded me of the WinAPI nightmare - I need to know it thoroughly or smoke a bunch of documentation and forums eventually lead to a thorough knowledge of a huge number of constants, without which I live well.
As a result, I rewrote everything on SpriteKit (and that, I have the right, the project is mine), and as physics I wrote a primitive engine - no more than is required for a 2D runner, 100 lines. There is nothing interesting or new in it, any programmer will write the same for the day. But the units of measurement from spherical in vacuum turned into pixels for a second and a second squared - it’s quite a pleasure to work with such, unlike the abstract meters for a device :)
But I had to tinker with the world notably - initially I wanted to write an endless scroller with an autogenerated world, which gave me a lot of pleasant and not very impressions. All layers of the visible world are generated randomly, according to certain laws, some of which (for example, the algorithm for generating trees in the background) I can not figure out until now. The code is replete with magical constants of the form “three two-by-two roots”, which over time have lost meaning for me - but it looks cool! Probably, it would be worth writing a separate article about it.
I also made a pretty clever parallax of trees - when you turn the phone in your hands, they depict a 3D effect. I added an invisible view whose parallax is computed by iOS itself, and for each tick of the game I read the delta of its coordinates, which I multiply by the distance of the tree from the user (1 is the furthest, 0 is the closest) and add it to (X; Y) the tree itself. It turns out pretty nice and productive.
By the way, I also had to tinker with performance, but more because of inexperience - for example, the biggest brake turned out to be that I turned to the UIKit element on each redraw cycle. Finally, I realized why the game engines have their own buttons and labels! And I, the ignoramus, made a HUD on ordinary iOS controls.
Conclusion
As an acquaintance, the music was written to me by the leader of one Belarusian rap group for a nominal fee to 1 bank of my grandmother's adzhika, whom he has loved since his studies at the institute. In my opinion, it is beautiful in itself (and music, and adzhika). The rest of the sounds were found by our tester Igor on the drains, for which he thanks a lot as well as everyone who helped me in creating the toy. I almost forgot, link to upstor , enjoy the game! I will be glad to every comment!
UPD: on the video link gameplay.
Source: https://habr.com/ru/post/242713/
All Articles