⬆️ ⬇️

Pebble Kombat. Javascript Watch Game Development History

Hello, my name is Alexander and I am an anonymous pitognogik. But a year ago I was lucky to write one game exclusively on JavaScript for Pebble smart watches ...





Concept



The idea of ​​the game was born randomly, in agony and attempts to explain to the students the basics of the PLO. The computer and the player were assigned a fighter class with three sets of hit points for the head, body and legs. In turn, the player chose that he would attack or block. The computer decided it at random. Writing a step-by-step fighting game was interesting for everyone, both schoolchildren and me. But then the thought came to me, why not develop the game from training to full (relatively). In addition, the other day I received my first Pebble Steel, whose three wonderful side buttons fit the game format perfectly.





')

Well, the process has begun. As a result of creative impulses at the exit to version 1.0, I came up with 8 characters, each with their own unique skill, which activated each phase of the game during an attack or block. For example, Berserk, under certain conditions, began to punch a block, and the Necromancer completely reflected all the blocked damage back to the attacker. Two game modes were also planned: Tournament and Survival.



The name for my first pet project wanted to come up with a spectacular and meaningful one. So it turned out to be a hybrid of the notorious Mortal Kombat fighting game and the Pebble Smartwatch brand.



Graphics



Logic logic, and the characters and the interface needed to be drawn. Then I came to the aid of freelancers. More precisely one. More precisely one . More precisely, I found it myself. We worked together quickly. Having provided her with all the available information, including the technical characteristics of the screen, she drew excellent characters and backgrounds for them.







An interesting point was to come up with what the characters will stand on. At first we tried to locate both fighters on the same platform, but it looked quite simple and limited us further.



A separate story was the development of the start screen, which I could not accept until the last option. (By the way, the idea of ​​the “Tournament” mode icon was spied by me from the game Guild Wars 2, in which Quickness was depicted in a similar way, but I hope no one will beat me.)







After a couple of weeks, I received the entire set of graphics and now I was calmly able to get to work.



Development



Turning to the developer portal, I found that, alas, I cannot use my favorite python. Not long after looking at C and JavaScript examples, I turned to the Pebble.JS documentation. The game was quite extensive (more than 800 lines of code). Also in a new language for me. In addition, the game wanted to refine and refine.



Everything turned out to be easier than I thought. Create an instance of the window, add the necessary graphics to it (loaded into the _items list) and run the show () method for display.



var main_wnd = new UI.Window(); function main_wnd_gen(){ var main_menu = new UI.Image({ position: new Vector2(0, 0), size: new Vector2(144, 168), image: 'MENU', compositing: 'set' }); main_wnd.add(main_menu); } main_wnd_gen(); main_wnd.show(); 


True in the development process there were some nuances. It turned out that it was not entirely reasonable to allow the computer to randomly choose a block, otherwise the game was reduced to beating one place. We had to intervene, increasing the chance of blocking the critical zone with the least number of hit points.



 this.blocking = function (block) { if (this.ai == 'Enemy'){ this.save = ['h', 'b', 'f']; for (var i = 0; i < 3; i++){ if (this.hp[parts[i]] < 10){ this.save.push(parts[i], parts[i], parts[i]); } if (this.hp[parts[i]] < 20){ this.save.push(parts[i]); } } this.block = this.save[Math.floor(Math.random() * this.save.length)]; } else { this.block = block; } }; 


There were other incidents. I don’t know why, but I couldn’t change objects by their names - I had to directly access the _items array of the window object and change the elements



 var game_wnd = new UI.Window(); ... function game_wnd_gen(){ game_wnd._items = []; ... var attack = new UI.Image({ position: new Vector2(0, 0), size: new Vector2(30, 30), image: '', compositing: 'set' }); game_wnd.add(attack); ... }; function game_wnd_update(){ game_wnd._items[9].image('images/attack/' + heroes[1].name + side[1] + '.png'); 


In the end, I was disappointed. On the Aplite platform (this is just the first Pebble and Pebble Steel), some of the pictures refused to load, which resulted in complete unplayability. Only Basalt remained.







September 5, 2016



So in September, the game saw the world. No advertising, no articles, just satisfaction with the fact that the project is completed. And what was my surprise that in a few days one little boy wrote a video review . This dearness warmed my heart.



And a few days later, Jon Barlow himself (I really don’t know who it is, but “Jon Barlow himself” should have raised my CSW), while a member of the Pebble team and a shop moderator added the game to the Fresh Picks category (he now Of course, no fresh)







May 2017



I left vain attempts to start the game on Aplite normally. At this point in the game was present, but did not show additional damage, which caused a little confusion.



But Pebble 2 appeared. Transferring the game to another platform was not difficult, it was enough to add Diorite support to the appinfo.json file. In addition, the whole set of black and white graphics remained with Aplite, which on the new SDK 4.x refused to start at all.







October 2017



Already a year has passed since the publication of the game. The statistics contained about 360 downloads and 47 honest likes of the players (ok, 46. One of mine). I still had an unresolved issue with the display of additional damage on some characters and a pair of female character sprites.







Yes, yes, all 8 fighters turned out to be men as a result. But no sexism. Taking the will into a fist, I had already finished drawing the missing sprites myself, added the code, plus added a female character, an archer (but left it unplayable) and came up with another game mode “Crazy”, in which it was already not so easy to defend. It could already be called a full-fledged addition.



PS



What's next? Yes, it seems, and nothing. One could pervert and write a multiplayer mode. But it seems to me already superfluous, at least for hours.



In fact, there are many ideas like storyline, active abilities, ammunition and artifacts. But if that is to be, and the project will grow into Pebble Kombat 2, then it will already be for mobile. At the same time there will be an occasion to learn another language. ;)



The owners of Pebble Time and Pebble 2 watches can indulge and “check out” the project personally .

But for those interested in digging deeper, I posted the source code on Github .

Source: https://habr.com/ru/post/341376/



All Articles