Leonardo Pereira

Senior software developer from Rio de Janeiro, Brazil.


Project Phynia

My web-browser MMORPG. Created using Coffeescript and Rails 4, with node.js and a lot of awesome stuff (like animations in browser!). It's under development.

I'll show you some of the most exciting modules present in the current project. (it's an alpha version, it may change in the future.)


About the project

I have always dreamed about creating my own game, but because of my lack of artistic skills and investment I could not follow directly the development (in an Unity engine, for example). Instead, I tried my best with the skills I already have: web development.

Soo, in 2008 I started scratching the first lines of what late would become Phynia. I desired to have some dynamic and really important functionalities to give the game the sensation of being real (not just text-game), for that, one of my priorities had been animations and gameplay.

With that, a MMORPG should have the possibility to allow the player to create his own strategy for the gameplay. Another priority has been taken. And the game should also have a PvP (player vs player) option. We must be able to battle our friends! It's fun.

Well, with my topics defined, I get back to the paper and started drawing the basics of the game. My main focus at the time was in the battle system and the navigation system, the two parts of the game the player would focus most part of his time. Now I'll show what I get (and working) at this time.

Please, remember it's an under development game. I'm putting my best effort to end it. I don't have the resources, just imagination and my willpower. I have to do all the programming (and creating the Engine, which I gently call PhyniaEngine), the design, the sound, the background music (actually I'm using youtube), all the animations and it goes on...

PS: The images below are written in Brazilian Portuguese, I pretend to launch the game in two languages: English and Brazilian Portuguese (my native language)
PS 2: The images were captured as GIFs, soo the quality is highly below the true quality showed in the game. (as the smooth transitions are way better)


The Navigator / Multiplayer Map


The Multiplayer Map

The basic navigational and discovering tool of the game, this will be one of the most accessed pages of the project. Written with Node.JS and Melon.JS, its use a basic gameplay based on the directional pad (up-down-left-right) to navigate through the dynamic map, it supports many online players at the same time (but I didn't calculated the real quantity yet) through the sockets connection of the node.js and is fully integrated with the Melon.js. Also, you can customize all the player characters (initially by a set of options I'll provide) and the maps are integrated with the Tiled (Map Editor) software.


The Chat / Commands Menu

Right below the navigator is the chatroom and command input line, it allows to communicate with others players in real time (through node.js again) and to get information about the current map and players.


The Battle System


Entering in the battle

At the right side of the navigator is the Tickers (or in the future, Stickers) menu. It'll be a dynamic set of options which will show and hide while you navigate through the map, occasionally showing itens, battle proposals, enemies encounters and much more. I designed it with the objective to allow new interactions easily.

After you click at the "Ir para a batalha?" (Go to battle?) button, you'll be transfered to another screen to start the combat, with sorted enemies (throught the map probability) and it displays the transaction animation of page changing (which actually is all over the place, but it can change with time).

When you enter the battle page, it put your heroes and enemies in randomic positions to start the fight. A time counter (which is not being showed in this GIF) runs above, also informations about you, your enemy group and the time to take an action (for now is limited to 60 seconds).


The user action menu and the select a move path

When you are in the battle page, you'll have to choose your action (or click the End Turn button above the board). The interaction starts by clicking at your hero avatar and opening the actions menu.

At the action menu, 5 options will be displayed: Move, Attack, Skills, Inventory and Guard. Each action will present a very important choice to the battle. In this GIF, I've selected the Move action, and displayed my zone of allowed movement to do. It's a very important part of the basic mechanics: The transparent white blocks show where you can move (it changes based on the hero attributes), but you also cannot move to where a hero/enemy is already, so the selector will change the color when an action is allowed or not. Red: You cannot do it. Blue: You can do it.


The action of movement and the AI action of following/attacking a hero

Here is what happens after I've selected the move action on my two heroes. An animation starts showing in real time to where they'll move, and then the enemy AI runs doing a couple of choices: attack or follow the closest hero.

It looks really simple and it is, but I've to put a great effort of time and dedication to make it happens. Also, my engine is evolving to produce a more advanced AI.

When an action of attack/skill/inventory is done, It'll produce a text animation informing what had happened (decreasing HP after a damage in this example), also will show if a skill had been cast or an item had been used.


Attack animation

The attack action is really similar to the move action, however it adds the option to select an enemy in the board: your target. This adds another color to the select action, the Green color: which says that your target is available for the action.

Also, you can see some details I put in the game, like the HP bar decreasing smoothly at the enemies side. And since my hero Gatts attack was too strong for the Porcosso, he had died with one hit. Been removed of the board (I tried to create an explosion animation of the character, but with limited technology it hadn't been so awesome...).


Inventory and healing

The inventory action is a little different between the normal actions (which interact with the board), here it'll open a new menu, displaying your available itens during the battle. After choosing the item you'll use, another menu opens showing the hero (or the enemies if the item can interact with them) to select.

After that a text animation is displayed above the caster of the item, than a custom animation is displayed above the target showing it had received the item effects.


Using guard, skill (overdrive) and victory animation

I've put a lot of efforts in the battle system to it be at the same time fast but strategic. You can end a fight in less than a minute or maybe in half a hour. It's your choice of how you'll do it. In this example the battle had ended very fast.

Here I used the skills action to select the overdrive skill (which is displayed by the circle around the hero in the board, when completed it's yellow, but while it's charging it'll be a light blue color). When fully charged the option is available to be used through the Skills menu. After selecting the skill, the next action will be exactly like the attack action. (this interaction however changes depending on the selected skill, maybe enabling to select another teammate).

Then an animation of the attack and the final enemy is dead. The victory menu opens (and the background music changes! Yeah, it has background music and sounds to every action) showing you what you earned: experience points and money (called Jacks). :)


Some screenshots from other pages (click to enlarge)