Energy Radar update

I had missing posting one last update on the work I have done on the “Energy Radar” project last year; I went one step further with some tweaks for the base display (fixing some stretching being done in the images).

Then I started tinkering on giving the project a big turn, since I still don’t have permissions to use the Pokémon characters, I’m considering using my own (well, I got them from an Oryx tileset)

In any case, the project remains on hold for now.

Pokenergy Radar Refactoring, animated Pokimon

Added animated pokemon in AR mode, as well as your own Pokemon.


My prototype so far consisted on a single scary monolithic 762 lines 25KB JavaScript file. Since I plan to use it for a couple of interesting projects in the future, and there are some parts of it which I’m not certain are behaving correctly, the first step was organising it into something easier to handle.

It was no simple task, but in the end I managed to do a successful first round of refactoring, dividing it into 13 modules.


My process was to start distributing the methods from the big class into smaller classes with a single responsibility, then seeing what modules these classes ended up depending with and in case it made sense, add them as a dependency wired at initialisation. Running Cordova in the browser sped up debugging a whole lot.

My main motivation for doing this refactor was being able to implement unit tests into the separate components to make sure they are working ok. Since there are many things going on at the same time, it’s not easy to be sure which one are failing in the equation to provide the player with an adequate experience.

So far the project evolves in two directions: The first one will be completing this Pokemon concept; I’ll be using a simplified battle system instead of the full rules (won’t even be implementing the full Gen 1 rules), but you’ll still be able to take advantage of the different moves they have including the type bonuses and resistances.

The second one will be my own location based monster training game. More info about that one soon 🙂


Professor Slash’s Energy Radar, my own location based monster hunting game

Pokemon Go recaptured the people’s imagination of what could be done in a game mixing reality and virtuality. However, after the initial joy, many people started complaining about the lost potential and how they screwed up by not adding some features that could have made the game a more complete experience…

I myself continue playing, but I agree the experience has degraded over time into grinding endlessly for candy in order to evolve my Pokemon, and rarely finding a new one even tho my Pokedex is still fairly empty.

But complaining is too easy, how about actually going ahead and trying to fill these gaps?

I couldn’t get the idea off my head, so even in times like now when I have very little spare time, I jumped into it. This is my very own effort to create a location based monster training game: Professor Slash’s Energy Radar

Professor Slash’s Pokemon radar is able to detect different sources of Pokemon energy around you.
A wild Rattata appears…. Go Charmander!


Use your phone to track different kinds of “energy sources”. Walk to them and once you are close enough you will be attacked by a wild Pokemon, then you have to weaken it by fighting using the Pokemon in your team… the wild Pokemon won’t just stay there dancing for you tho, it will attack back using its own techniques. You can switch Pokemon on your team anytime to take advantage of their skills and types.

Once the Pokemon is weak enough you can try catching it by throwing a Pokeball, your chances of capturing it depend on how weak it is. If all your Pokemon are defeated, you will lose your chance to capture it and won’t be able to face other wild Pokemon until they have recovered (they will recover their hit points with time or you can take them to a Pokemon center by walking close enough to one of the towns in the fantasy world).

The energy sources around you are based on your location in the fantasy world (Kanto in this case). The game map is overlaid on the real world as a 8km x 8km area (approximately), so you have to walk around your city in order to find different types of Pokemon. Even without connecting to a server, all players find themselves around the same in-game location and get to see the same energy sources .

You can train your Pokemon by fighting wild Pokemon or another trainers via Bluetooth. Stronger Pokemon stand a change against powerful wild Pokemon you want to catch.

Creating a working prototype

Creating a full game following this design would be a huge enterprise, beyond what my limited time and resources currently allow. However these ideas haunted me, and I set myself to create a working minimal product which could at least be used to validate them in real life.

The result is a huge mess of code which works pretty decently for the time I was able to invest. An obvious next step in case I continue pursuing this development is doing some massive refactors (all game logic is currently implemented as a single huge monolithic 747 LOC JavaScript module) and optimizations (basically I didn’t care about the CPU for this version so I do lots of redundant calculations, and I don’t really want to talk about the rendering strategy 😛 )

BUT, it works… I managed to have something to experiment with!

Overall Architecture

One of the things I am going for is being completely server-less while still allowing social interaction between players. This is of course to allow infinite scalability and not having to worry about server loads (One of the main headaches Niantic had/has)

I chose to create an hybrid JS Cordova app just because it would allow for much quicker prototyping while at the same time giving me access to the device services I knew I was going to require:

  • GPS sensor
  • Compass
  • Accelerometer
  • Camera
  • Vibration

Server-less social interactions

This, I think, is the core of the app. I used the seedramdom module from David Bau which contains seedable PRNGs that I could seed using a combination of the different locations, time of the day and other parameters. All this in order to make the same energy sources show up at a given time for two players being on the same location, this way there could be social interaction (Hey! There’s a Dragonite near me, come and get it!)

Also, everything is local here. You don’t even have to create an account, all your progress in saved in your device.

Geo tracking

This one is of course one of the main features, since you need to move around in order to interact with the world. The cordova-plugin-geolocation provides you latitude, longitude, and even altitude, along with a precision value.

A lot of processing is then done to convert from geospatial references to physical distances in meters. It is a pretty interesting topic I had already visited back on the times of Expedition. This answer, derived from the Wikipedia article, was super useful.

Of course, GPS is still far from precise (and I’m not sure if that’s ever going to change!), some postprocessing and filtering is needed to smooth the sensor readings and eliminate noise.

Current GPS support is awesome, but its accuracy limits make some kind of interactions people are dreaming with impossible. I can understand why Niantic had to force some design choices around the restrictions of current technology.


Walking detection

Used the cordova-plugin-device-motion to get the x, y and z acceleration values using the phone’s accelerometer in order to try to find out if the player is walking, main goal was not having wild battles triggered while phone is lying on a table or you are holding in your hands without moving.

In the end after some experimentation I was able to provide a fairly accurate approximation via a Kalman filter (I don’t know what that is, I just followed this answer from StackOverflow 🙂 )

Directional radar

In order to make it easier to get to the energy sources, the radar rotates based on the direction you are heading.

I used the cordova-plugin-device-orientation plugin for this, it gives you a 0 to 360 degrees value for orientation, then I applied a simple transformation to the position of the energy sources in the radar.

Pokemon Combat rules

As someone who loved the original Pokemon games, one of the main things I wanted was having Pokemon battles be an important factor in the game; here’s some of the differences.

  • Catching Pokemon
    • Pokemon Go: Using a razz-berry in order to get the Pokemon to love you, then throwing the Pokeball (with a finger gesture, slight skill involved) and hope it doesn’t break free.
    • My own: Weaken them in battle (risking losing the battle or killing them), then throwing a Pokeball (catch chance based on how weak and how rare)
  • Training Pokemon
    • Pokemon Go: Feed them candy and stardust. Get more Pokemon of the same time in order to grind them into candy and repeat the process.
    • My own: Battle wild Pokemon and other trainers to get experience and level up.
  • Battling Pokemons
    • Pokemon Go: Pokemon have a simple and a special attack. Tap the screen as fast as you can to use the simple attack and accumulate energy for the special attack.
    • My own: Turn based, select the best attack to do based on your advantages and the status of the fight. Pokemon have a max of 4 attacks including status effects.

I implemented a veeeery basic combat system, implementing the full combat rules would of course be a lot of work. I would initially target for the first generation rule set, I did some research around and found some already existing JavaScript games which could be useful. The alternative would be having a simplified system.

Bluetooth P2P Connectivity

An obvious social feature is allowing players to combat each other; following the server-less approach, I picked basic Bluetooth communication to establish a peer to peer link.

Used cordova-plugin-networking-bluetooth from Franco Bugnano, who has some interesting blog posts on the topic. This only seems to work on Android, which is good enough for me 🙂

Some samples of the current bluetooth connection flow, for now I’m just establishing the connection and sending a simple message from a player to another and back, future work would be establishing the complete battle flow.

Vibration feedback

Used when starting a battle and when the pokemon are hit. Just a small detail that the cordova-plugin-vibration plugin allows to do very easily 😉

Augmented Reality on battles

As a final touch, I used the com.ezartech.ezar.videooverlay plugin from EzarTech in order to show the video in the background while on battle. Future work: Use accelerometer to relocate monster, allow snapping pictures.

More stuff?

Some other things I think may fit the game:

  • Adding some activities you can do without walking around (say once you are home). Playing around with your Pokemon or making them train by fighting each other could be an option.

Why bother doing this?

Obviously, I don’t have the license to the Pokemon franchise so I can’t release this game as one my own so.. why bother doing this?

  • For my personal enjoyment (and my friend’s), I want to provide a different (better?) experience for a location-based Pokemon game.
  • I want to know how far is it possible to go today with hybrid apps and Cordova with regards of extended smarphone functions.
  • I always wanted to make use of some features that modern smartphones have and apply them into something fun.
  • I’m creating this as an engine, in the future I may actually use it to release a game under one of my IPs.
  • I needed to get it off my list, after building this prototype now I can live a peaceful life at last.

If you would be interested on giving this a shot, drop me a line 🙂