Pokemon Adventure Bot - Fighting System Visualisation - BlogPost #001
Repository
https://github.com/Divirad/pokemonadventurebot
Introduction
English | Englisch
Die deutsche Version ist weiter unten ;)
Source
Dear Steemians!
If you have read my/our last BlogPost about our PokemonAdventureBot, then you have certainly read that our bot should get a fighting system. Of course one first thinks to oneself "Uhmn, actually you have only to implement the basic rules of calculation for fighting fight it is certainly not so difficult" and I must confess, that's exactly what we thought at the beginning. Of course you can simply make a text-adventure game, in which only the names and no pictures are displayed, but this is admittedly really boring and you would quickly lose the desire to play. We see in this bot the challenge to offer a visually good game experience with the "few" resources (which are really many resources for a Messenger Bot API compared to other services). We want to deal here in this BlogPost with how we (Divirad) want to visualize the fight in the bot.
Post Body
What options do we have for the "Fighting Screen"?
In the last post we already showed a small screenshot how the fight screen could could look later. But I think we agree that this is not really a very pretty solution.
We Pokemon fans are used to this setup. A Pokemon in the upper right corner, which is the enemy Pokemon and a Pokemon in the lower left corner, which symbolizes your own. Below of that the menu with four options.
Source
In our first implementation of the fighting system you only saw the opponent's Pokemon and it just felt awkward when you play it. We want to implement the first 151 Pokemon and since you can also fight against the same Pokemon you use, this results in 151² = 22801 possibilities for a fight. And creating a sticker for every combination is really not a nice thing.
But why have we used stickerpcks so far? Very simple:
- The stickers are hosted on the telegram servers and we have more space for user data
- There are images whose preview is not completely displayed in a chat due to scaling
Unfortunately, this also has some disadvantages:
- A sticker pack may only contain 120 stickers (We found this out by trial and error)
- The sticker must be x*512 pixel large
So Dyrax and I met and worked out some other implement ideas.
Option 1 - Puzzle!
Our first idea was to create sticker packs with one Pokemon at the bottom left and one at the top right and then simply "puzzle" the fights together. This would reduce the number of stickers to 151*2 = 302 and the bot would have to use less calculation effort from the beginning of a fight. So you would have enough space for other stickers, such as puzzling a pokeball in it when you catch a Pokemon.
Advantages:
- Each of the 22801 possibilities could be represented with max. 4 sticker packs or 302 stickers
- Less complex construction in the sticker packs than with 22801 stickers
Disadvantages:
- It just doesn't bring the usual Pokemon fighting feeling
- If we don't write a program to create these 4 sticker packs, that's a lot of manual work.
Option 2 - Image rendering!
But we can also say goodbye to the sticker solution. The bot could simply render the images and send them to the user as images. At the beginning the fight would need a little more calculation but the fights would be more individual and it would be more fun to fight against wild pokemon!
Advantages:
- It looks really good and gives the user the best possible Pokemon fighting feeling
- Fully automated
Disadvantages:
- Before the fight the bot has to render the image first and the computational effort becomes bigger.
- You have to make sure that the scaling of the image is good and really complete.
What are we going to implement?
We will implement the second option. Because we want to offer the user the best possible Pokemon-Fight experience.
(You can already try the rendering with /photo in the pokemonadventure bot. just clone the repo or wait until the bot goes online ;) )
Here some results of the automated beta-rendering:
Introduction
German | Deutsch
Source
Sehr geehrte Steemians!
Wenn ihr meinen bzw. unseren letzten BlogPost über unseren PokemonAdventureBot gelesen habt, dann habt ihr bestimmt auch gelesen, dass unser der Bot ein Fighting System bekommen soll. Natürlich denkt man sich erstmal "Hm, eigentlich sind das ja nur die Grundrechenregeln die in dem Kampf verwendet werden, so schwer ist das bestimmt nicht" und ich muss gestehen, genau das haben wir uns am Anfang auch gedacht. Klar kann man einfach ein Text-Adventure Spiel machen, in dem nur die Namen und keine Bilder angezeigt werden, jedoch ist das zugegeben wirklich langweilig und man würde schnell die Lust am Spielen verlieren. Wir sehen in diesem Bot die Herausforderung mit den "wenigen" Mitteln (die für eine Messenger Bot-API im Vergleich zu anderen Diensten wirklich viele Mittel sind) ein optisch gutes Spiel-Erlebnis zu bieten. Wir wollen uns hier in diesem BlogPost damit befassen wie wir (Dyrax, Cionco und ich) den Kampf im Bot visualisieren wollen.
Post Body
Welche Möglichkeiten haben wir für den "Fighting Screen"
Im letzten Post haben wir ja schon einen kleinen Screenshot gezeigt wie der Fight-Screen später einmal aussehen könnte. Doch ich glaube wir sind uns einig, dass das eine nicht wirklich eine schöne Lösung ist.
Wir Pokemon Fans sind dieses Setup gewohnt. Ein Pokemon oben rechts, welches das gegnerische Pokemon ist und ein Pokemon unten links, welches unser eigenes symbolisiert.
Darunter das Menü mit vier Optionen.
Source
In unserer ersten Implementation des Fighting-System sah man nur das gegnerische Pokemon und es hat sich einfach komisch angefühlt wenn man gespielt hat.
Wir wollen die ersten 151 Pokemon implementieren und da man auch immer gegen das gleiche Pokemon Kämpfen kann, dass man auch eingesetzt hat ergibt das 151² also 22801 Möglichkeiten für einen Kampf. Und für jede Kombination einen Sticker zu erstellen ist echt keine schöne Angelegenheit.
Doch warum haben wir bis her Stickerpcks verwendet? Ganz einfach:
- Die Sticker werden auf den Telegram-Servern gehostet und wir haben mehr Platz für Nutzer-Daten
- Wir wollen die Nutzer nicht mit Bildern zu spamen, die sie dann später wieder löschen müssen
- Es gibt Bilder, dessen Vorschau nicht komplett in einem Chat angezeigt wird aufgrund der Skalierung
Leider hat das auch einige Nachteile:
- Ein Stickerpack darf nur 120 Sticker beinhalten (Dies haben wir durch ausprobieren herausgefunden)
- Der Sticker muss x*512 pixel groß sein
Also haben Dyrax und ich uns getroffen und einige andere Implemtationsideen ausgearbeitet.
Option 1 - Puzzle!
Die erste Idee war einfach Stickerpacks zu erstellen mit jeweils einem Pokemon unten links und einem oben rechts und dann die Kämpfe einfach "zusammenpuzzeln". Das würde die Stickeranzahl auf 151*2 = 302 reduzieren und der Bot müsste weniger Rechenaufwand von Beginn an bei einem Kampf aufwenden. So hätte man auch genug Platz für "Spielereien" wie zB. könnten wir einen Pokeball dazu puzzeln wenn man ein Pokemon gefangen hat.
Vorteile:
- Jede der 22801 Möglichkeiten könnte mit max. 4 Stickerpacks bzw 302 Stickern dargestellt werden
- Weniger komplexer Aufbau in den Stickerpacks als mit 22801 Stickern
Nachteile:
- Es bringt einfach nicht das gewohnte Pokemon-Kampf-Feeling
- Wenn wir uns kein Programm schreiben, dass diese 4 Stickerpacks erstellt wird das ganz schön viel manuelle arbeit
Option 2 - Image-Rendering!.
Wir können uns aber auch von der Sticker-Lösung verabschieden. Der Bot könnte einfach die Bilder selber rendern und dem Nutzer als Bild senden.
So würde zwar der Kampf am Anfang ein klein wenig mehr Rechenaufwand benötigen jedoch wären die Kämpfe Individueller und es würde mehr Spaß machen in einen Kampf zu geraten!
Vorteile:
- Es sieht optisch wirklich gut aus und gibt dem Nutzer das bestmögliche Pokemon-Kampf-Feeling
- Komplett automatisiert
Nachteile:
- Vor dem Kampf muss der Bot erst einmal das Bild rendern und der Rechenaufwand wird größer.
- Man muss darauf achten, dass die Skalierung des Bildes gut ist und auch wirklich komplett angezeigt wird.
Was werden wir implementieren?
Wir werden die 2. Optionen implementieren, da wir dem Nutzer das bestmögliche Pokemon Erlebnis bieten wollen.
(Du kannst das Rendering bereits mit /photo im bot testen. Klone die Repository oder warte einfach bis der bot wieder online geht :) )
Hier einige Ergebnisse des Beta-Renderings:
Resources
Pokemon Fight Image 1
Pokemon Fight Image 2
Bulbapedia
Series Backlinks
PokemonAdventureBot - Introduction Post
Fighting System Visualisation
Math in Pokemon
How is our Pokemon-Database Structured?
Multiplayer Battle - How are we going to implement it?
Stage 2 Summary
Stage 3 Summary
Stage 4 Summary
Stage 5 Summary
Stage 6 Summary