Due to some vacations and other distractions we’re not quite ready to give you our bi-weekly CrossUpdate. However, as promised, we now finally post our technical article about performance.
Here we go!
Incoming performance problems
We started with HTML5 game development around the end of 2011. We bought an impact.js license and started working on CrossCode. And since CrossCode demanded 3D collision, we modified the engine – and continued doing so until almost every nook and cranny was changed in one way or the other. So it’s safe to say that we did not only develop a game but a whole game engine with it.
And of course, whether you create a game or a game engine, performance is always an issue. To be frank, initially we did not pay too much attention to performance. We saw that our game was running with 60 fps on modern machines. 60 fps for an HTML5 game - what more do you want, right?
However, about half a year after we released the TechDemo++, things changed as we had a terrible realization:
Our game has become slower.
Yes, it was slower. Not because there was more content or complexity. When running the same maps with about the same number of entities, we experience an decrease in performance when comparing the latest development version with the TechDemo++.
Fortunately, we managed to fix these performance issues. And with this technical post, we want to share our experiences.
The core of the problem
- Polymorphism: calling the same functions with lot of different input objects.
- Object size: a large number of properties per object.
Our game, as any game based on impact.js, uses composition over inheritance to implement entities.
Bummer, right? Well, let’s first explain the issue with composition over inheritance in more detail. Afterwards we will show you how you can still fix all this without implementing the whole entity system from scratch.
Composition over inheritance under the looking glass
What does composition over inheritance mean in our context? The idea is that the game engine provides a generic entity base class from which all other game entities should be derived. Derived entities classes can add more properties and implement new functionality. In a game engine such as impact.js it is encouraged that each new entity is created as a new class. So what we get is something like this:
The first problem becomes apparent once our entities grow in complexity: since all functionality is stuffed into entity classes, we accumulate a huge amount of object properties. Here is an example how this applied to our ActorEntity class:
So in short: we easily passed the object property limit until which object access is optimized in V8.
The next problem lies in to the use of our entities within the game engine – the collision engine and rendering. Because collision and rendering is one process that is the same for all kind of entities, we inevitably arrive at this situation:
But fear not, as there are ways to fix this. And we don’t even need to throw away the whole composition over inheritance pattern.
Fixing the performance issues
Now that we understand the reason for the performance issues, it’s time to fix them. Since all these issues rise from the composition over inheritance pattern, an obvious “fix” would be to simply not use this pattern and move to something else, e.g. an entity component system. At this point we can basically overhaul the whole game engine itself – and that is not always an option. However, there is also the option to go for a mixture of both patterns, where you introduce components only for performance-critical aspects of entities and use composition over inheritance for everything else.
In our case, we decided to split the drawing and collision aspects of entities into separate components:
- The drawing aspect is enclosed into Sprite components
- The collision aspect is enclosed into CollEntry (Collision Entry) components
Both the Sprite and CollEntry components are free from any class hierarchy – there is only one class for each component, which is used for all entities. This is essential to make this fix work.
Entity properties are distributed among the entity class and the two new components. Since the drawing and collision aspects take a major share of these properties, the size of the entities class is greatly reduced.
To retain control over all properties, the entity will simply keep a reference to both the Sprite and CollEntry components.
Finally, performance-critical algorithms of the game engine are modified to work on the new components only: the collision detection operates on CollEntries and the rendering on Sprites.
And that is all. In practice, these modifications demand a huge amount of code refactoring. However, most of these changes are of syntactical nature, e.g. “this.pos.x” needs to be changed to “this.coll.pos.x”, whereas “coll” is the reference to the CollEntry from within the entity. We managed to refactor our (fairly blown up) game code in about 2 days.
First, we compared the collision performance before and after we introduced CollEntries. For this we used a collision stress-test, where plenty of NPCs were simply running against each other:
We got the following results:
As you can see, we got a general improvement for all browsers. Especially the performance in Chrome increased a lot.
Second, we applied a similar optimization in our GUI system, where we extracted the most common parameters from the GUI base class into a separate Gui Hook class.
Again we used a stress-test, displaying the part of our menu with the most visible content:
Again, we got a general improvement:
Moral of the story
So what did we learn from all of this? How about: Drop composition over inheritance because it is slow! Right?
Frankly, we wouldn’t make this kind of statement. It is clear now that approaches such as the entity component system are a better choice with respect to performance. However, composition over inheritance still has other advantages. For instance, we think that our inheritance based entity classes are much easier to read and understand. In the end inheritance will only lead to performance problems if your game reaches a high degree of complexity. So if your game only includes a small number of entities with a low number of properties (something close to the regular impact.js engine), you’ll be fine. And even if you arrive at complex territory, you can still isolate bottlenecks and apply improvements as described in this article.
So in the end: there is no need to drop composition over inheritance all together.
Until next time!
Yes, we’re one day late this time. Sorry for that!
Let’s go right to the update. Since last time, we worked mostly on graphical content – so expect some nice pictures.
Rhombus Square at the horizon
We have shown you concept art from a new place called Rhombus Square in a previous update.
Now I have created first in-game graphics for this location – a neat background:
What you see here is a skyline view at Rhombus Square. This background will be displayed during an important cutscene at the beginning of the game, which will be developed soon.
More cabin details and other graphics
Thanks to Teekuh, the crew of our cargo ship won’t starve anymore with this new, fantastic galley:
Note: this screen is only a mock up, which will be properly implemented soon. That’s why the lighting is kind of strange in the lower left corner.
In addition, T-Free is currently working on a new enemy (a kind of mid-boss) and Martina will soon continue working on graphics for a completely new area!
So, not too much content for the game this time, right? This is partly because we spend more time on another end:
We continued planning the future of Radical Fish Games as a company. We talked with several people on how to get finances for our project. We got to the conclusion that crowd funding will be our best bet. Still, there might be some other ways that will help us out financially, at least in short terms. In general: things are not always that easy in Germany…
Thanks for following our news and until next time!
That was quite the fun week and we did a lot of work on different ends. We added more details to the game and worked on advancing the plot. The Equipment menu got a bit more polished and some fresh new hotkey buttons. We also carved out the details on the circuit menu and began to implement the skilltree itself into the game. We also started planning a little something for our team!
Details… so many details
The cargo ship is the starting area of the game and since this will (probably) be the first thing the players sees we want to make sure they find a place filled with details and atmosphere. Of course this means more time is needed to finish up the area but don’t worry we will not go over the top. Over time creating areas will get more easy for us and we plan to reuse details in later areas if they fit.
So apart from us explaining why we love details… what did changed? First T-Free worked a bit on the waves and made them appear more staving. You can see the difference here:
These are the old ones, and the new ones look like this:
(Lea defies gravity!)
Thanks to TQ and T-Free the cabins got a new update which includes the workers lounge where people calm down after a hard day of work or… well… play video games:
(Can you guess the game which he’s playing? And yes, that typo is intended!) There has been different works on other areas too, but we can’t show them yet so stay tuned ;)
So I finally finished up the functionality of the equipment menu. It took quite a while but I also added a lot of reusable features along the way. Lachsen just rewrote our button manager system that handles moving through buttons via mouse, keyboard and gamepad to better fit what we need. Now we can easily integrate multiple menus on top of each other without any collision problems between different groups of buttons. This is a large topic to cover actually. If you want to know more, leave a comment and we might make a technical post regarding your questions. Next to the new system I also added hotkey buttons. These buttons can be found in the top bar in the menu. They serve as shortcuts to different menus or to revisit the help menu (the help dialog will only appear once if you enter the menu the first time). You can get a look on it in this picture:
Optimization & Circuit Menu
Lachsen spent some time on optimizing our entity system. The result is really amazing. The whole update goes faster by 1 millisecond! Okay, that doesn’t sound much by itself… but it is about 20% of our total time per frame. This mostly means that we can possibly add more entities to a map without losing those precious frames. Here is a quick look at our performance testing range:
These are 313 entities running at smooth 60 frames per second. We will cover more about this topic in an upcoming technical post about optimization in CrossCode. If you’re interested you might want to keep an eye on the blog for the next few weeks!
The circuit menu has finally taken a bit more shape in form of actual code. We sketched out the basic outline of the tree that contains the skills so we can easily create the tree itself whilst changes can be added with ease. As you might have seen in our previous post, we use a tree structure combined with so-called OR-branches. Along with this, we discussed the data structure we want to use for a single skill. We tried to make it as flexible as possible so we can make changes fast. The coming weeks will probably contain lots of information regarding the skill tree and the creation of the circuit menu.
A week of non-stop CrossCode Action? Developing until we fall asleep in front of our laptops? This is what we’re currently planning to do! A part of our Team will meet up to work together on CrossCode for a whole week. We hope that we can squeeze out more content for the game in that week, so we can proudly present it to you in the next update!
And this is where the weekly ends. We hope you enjoyed the weekly and will be here in 2 weeks to get a fresh batch of CrossCode Updates!
P.S. Our composer Intero leveled up on the 10th February! We wish our composer the best and hope that he will continue bringing awesome music to CrossCode. Happy Birthday Intero!
A new technical post! This time we want to talk about the GUI-System in CrossCode! Some people have asked us how we draw GUI elements and how we handle animations and all. Well today we gonna answer these questions… hopefully!
Check out the Blog post over at: RadicalFishGames
We decided to leave it on our blog so we can give you the best view on the code examples possible!
First, in case you are confused: we decided to rename our Weekly Update into CrossCode Update because of the lack of an actual weekly schedule. But don’t worry: This doesn’t mean we’ll post updates whenever we feel like it.The bi-weekly schedule seems to work out fine so far, so we’ll stick with it.
Anyway! What’s in for this update? Lots of stuff, in fact! We went ahead and started with a major goal of our next milestone: the circuit menu (formerly known as the talent tree). On top of that, we have a lot of graphical improvements, sound and music!
The new Circuit Menu
We talked about the talent system in CrossCode before. First big change: we renamed it to Circuit Menu. Has a more futuristic sound to it, right?
We started with planning out the layout and control patterns of the circuit menu. We all had very similar ideas, so we found an agreement very quickly.
However, before starting with the implementation, I first wanted to integrate several optimizations in our GUI systems. Those were very similar to the optimizations we had for the entities and the collision engine as mentioned in this update… and they worked again! And for all of you who are still waiting for a more detailed article about these optimizations: we did not forget it and will post it let’s say… sometime in February!
With these optimizations done, the next step was to create graphics for the interface. I finished this just about yesterday. And here comes a first mock-up for our new circuit menu!
Here the player can select one of the five circuits for further inspection (neutral in the center and clockwise around it: cold, shock, heat and wave). On the lower left you see available CP (Circuit Points) for each circuit. Those are used to activate the nodes (i.e. learn the skills) of each circuit. Note how activated nodes are already highlighted in the circuit overview! (That will be fun to implement. Good thing I won’t have to do it, right R.D.? :P). As for the “swap branches” option… we’ll probably talk about that in another update.
First what is missing: Icons are obviously incomplete. Even the existing icons might change (in fact GFluegel is already working on that). Also, the whole tree structure is more for graphical testing. That being said, we like how the result turned out, with that circuit pattern in the background and all.
The description will most likely appear whenever you hover a node with the cursor. Once you click it you can choose an option on how to interact with it. It’s more or less what you’d expect.
With all the graphics prepared, it’s now up to R.D. to implement the menu.
Pictures and Sounds!
T-Free was working pretty hard since the start of this year. He completed all the effects for the cold element mode. You could see some of the effects already in our Recap 2013 video.
Anyway, have a gif:
In addition, T-Free also added some nice wave animations for the cargo ship:
On the sound side, we have Teflo who recently contributed new menu sounds, e.g. for the equipment menu. Even though we’re still fine-tuning these sounds, they already help to make the equipment of items a much more satisfying experience.
Finally, our composer Intero continued working on the BGM for the outside of the cargo ship. He already created an initial version, which matches the mood perfectly! Maybe we’ll release another preview in a following update. :D
And… that’s all for this update! Overall, it’s a fairly good start for this year - especially considering we had to struggle with several study-related deadlines during the past weeks.
Otherwise, you can look forward to another technical article about our menu system that we’ll post during the next two weeks.
It’s finally time for the great recap of all the things happened in 2013!
CrossCode has come a long way. Thanks to all the help and the great feedback we managed to push CrossCode quite a bit. Since the TechDemo, CrossCode has changed a lot. And today we present these changes to you in the form of a video! This video will cover the biggest changes we made to the game, all commentated by our composer Intero!
So… less talking more watching!
A quick heads up: creating such videos is a new experience for us, but we still hope you enjoy the result! We learned a lot from making it, so expect better quality next time. Also, in case you find the hit sounds a bit strange at parts: yeah, that’s a bug. We’ll fix it soon! Also, let’s summarize all the new stuff with text too!
CrossCode now has real cutscenes, which are mostly presented via dialogues and various animations. The characters in the dialogues are portrayed with facial expressions. We aim to always make the appropriate expressions for any given situation, so you can expect lots of them! Also characters might talk to you via the new side message system which is displayed at the lower left of the screen. Since these run in real time while you run around bashing enemies, you can also check out a list of the last 50 messages in the pause menu.
What is a RPG without NPCs to interact with? …Right! CrossCode now has them too! You will able to talk to a lot of NPCs while playing the game. But we don’t want NPCs to be just mere decoration, topped with some text. NPCs will mostly have something interesting to say and maybe also have a quest for you. We also plan a different kind of dialogue system with NPCs, which will hopefully make NPCs and the dialogues feel and look even better.
The TechDemo really had no story whatsoever. But this changed completely. Cutscenes are a big part of our development and they are coming along nicely. We spent a lot time on them to make them just the way we want them. This is mainly because we don’t only want to deliver fluent gameplay but also a good story that keeps you entertained.
Just like a classical RPG, CrossCode also has a classical menu, which you can access anytime outside of a battle or a cutscene. Here you can look up your items, change the equipment (which is also the only menu that is basically finished), level your skills, look up information or change game options. The goal here is to create a visually appealing and yet easily accessible menu. Especially if you want to quickly look up things you don’t want to meddle with bulky and slow menus. Let’s dive into some combat-related features!
In the TechDemo you could not attack enemies on close range. Well you could, but you would take a large risk. With the new close combat attacks you can not only attack enemies close-up but also hit multiple enemies at once! You are still in the risk of being hit from the back but you have a bigger chance to survive in a fight against a large number of foes. It also gives you more “mix-up” options to approach enemies.
Sometimes you can’t counter an attack and dashing always would put you in a bad situation (like an enemy attacks with an “area of effect”-attack). This is why we added guarding. Guarding will reduce the damage you take by a lot but only if you guard the attack in the right direction. If an enemy attacks you from behind, you will receive the full damage.
To make the combat more interesting we added the so-called Element Modes. Each mode will make you more resistant to the corresponding element and grand you special abilities only available in the specific element mode. Each element mode will also have special use in combat. Heat is a aggressive close ranged element, while Cold is a defensive element. Shock is for risky fast paced attacks and dodges, while Wave is for backing up, healing and trying to figure out a strategy. Of course CrossCode will feature enemies that use one or more elements, too. There might even be enemies that require you to switch through 2 elements or more to fight them effectively. Element Modes will also have special properties for solving puzzles in the game.
To make combat even more fun, we added battle techs. Battle Techs are skills that are executed by holding down the charge button and releasing it. While charging, time will slow down, which gives you a bit of time to think about your next step. Which Battle Tech is executed depends on the action you’re currently doing and how long you hold the charge buttons. The actions are throwing, attacking with close combat, dashing or guarding. Each Battle Tech will consume 1 or more of your SP, so you can’t just throw them out but have to use them wisely in the combat. You can easily regenerate SP by just attacking the enemy. Outside of combat your SP will regenerate to a given threshold.
And this sums everything shown in the video…
we forgot the greatest news!
Thanks to node-webkit we managed to bring CrossCode to the Desktop! That’s right. CrossCode will also be available on Windows, Linux and Mac. This is pretty new to us, too, so expect more announcements at a later date.
But wait! There is still more!
Not only can we bring CrossCode to the Desktop, we can also bring it to the Wii U! Thanks to Nintendo and the Nintendo Web Framework we can port CrossCode to the Wii U. There is still some stuff to do to make the game run on the Wii U. As you might imagine the Wii U has a specific hardware set and we need to adapt CrossCode to make it more playable and avoid potential problems.
And… that’s it! Now considering the fact, that we only work on CrossCode in our free time, quite a lot of stuff happened. This year, we hope to finally change the pace and work full time on CrossCode. It will be an interesting year for Radical Fish Games and we hope that we can continue to show you our progress every second week. We have great things in store and a demo in work. So stay tuned for an awesome year, full of CrossCode-Action!
Until next time!
It’s time for some 8-Bit Action!
Over the holidays we were cramped together in a small room so we thought: “HEY! Why don’t we make a Gameboy version of Ninja Hobo Connoisseur?”.
Long story short: We did it and today we gonna release this epic version of Ninja Hobo Connoisseur under the title:
Mega Ninja Hobo Connoisseur
- All graphics redone with 4 colors
- Remixed Soundtrack by Intero and recorded with a real Gameboy by TQ
- Small effect changes (no transparency on the Gameboy)
- Changed the resolution to 320x244 which is twice the size of the original gameboy resolution
- Gameplay and map changes
So get ready for some 8-Bit Ninja Action! Click the Link below and try to be the fastest.
If you want to listen to the soundtrack on its own, check out Interos SoundCloud Profile here: Mega Ninja Hobo Connoisseur OST
Have fun with this little holiday project!
Until next week!
And thus, 2013 was over.
It has been about one year since we released the first demo of CrossCode. And boy, lots of stuff has happened since then. Some of you are probably curious about the current state of the game. In that case, you can look forward to next week, when we plan to release a recap video summarizing all changes in the game since the first TechDemo. This video will include plenty of in-game footage, maybe some commentary wiz ze German accent and also a little surprise!
As for today, we will present all the work we did over the holidays, which includes advanced lightning effects and milestone planning.
New dynamic light engine
As you know, we have some kind of lighting in CrossCode with some parts of the map being slightly less illuminated. All this really has an impact on the whole atmosphere, but also the drawback that it’s a bit hard to see all the small details in the dark spots on a map:
You can see how the ball loses contrast inside the darker areas and becomes difficult to spot. That’s why we extended our “lighting engine” (if you can call it like that) to dynamically brighten up around important entities like balls:
We also illuminate the area around any kind of hit effect including those of close-combat attacks:
That way you can see all these effects with bright colors, even inside dark spots.
Neutral Talent Tree Planning and progress with cutscenes
GFlügel was planning out the detailed layout of the neutral talent tree. It has quite a lot of talents:
Nope, we won’t provide any higher resolution for now. :P It’s just a first draft, anyway.
Other than that, we made slight progress with cut scenes and the cargo ship scenario. We added a few more NPCs, also with special poses:
Wrapping up 2013 and going for a new milestone
We had our milestone for 2013 and we managed to fulfill it… mostly. Now it’s time to wrap up 2013 and plan a new milestone for spring 2014.
Our next milestone will be all about the talent tree and boss battles. Here a list of what we plan to achieve:
- Advance the plot to a first (tutorial) boss battle
- Further advance the plot to the first boss battle
- Implement the talent tree menu entry
- Further engine optimizations
Also, since progress slowed down a bit during the last milestone we created a new system to manage our task and coordinate work, hopefully increasing productivity. Let’s see how it works out!
New team members!
Okay, it’s really about time to properly present to you two team members that have been around for… quite a long time. Better late than never! Incoming two sprite artists:
Thomas ‘T-Free’ FröseAlways struggling to improve in arts and animation, I have become a quite sophisticated spriter and artist in the course of many years. In CrossCode, I’m responsible for helping out creating and breathing life into characters and making battle animations and explosions flash and flicker. Get ready for some eye-candy!
Daniel ‘The_question’ TillmannAs a musician with a passion for cooking, I am doing some graphics for CrossCode. Confused? Yeah, me too! Like Martina I’m more of an environmental designer, as I’m rage-quitting every animation I’m starting. Aside from that, I’m the head of the radiation protection division in some big hospital. Soundcloud
And that’s all for this update!
Now it’s time to work on that recap for next week…
We are now close to the Christmas break and things are getting really busy. Everything needs to be wrapped up in a way… be it university projects or presents.
And yes, for CrossCode we have something to wrap up as well: our milestone for the end of 2013. Hopefully we will find some time between the holidays.
So, what was done the last two weeks? We finally added a couple of new cutscenes, added another battle tech and did a lot of planning.
Well, not much to tell here. Here’s the part that took the longest time to do:
…Yes, taking the elevator with an NPC. Blame the physics!
Also here some screenshot with an excerpt of a dialog for speculations and stuff:
So yes: With this update the play time of CrossCode finally increased, if ever so slightly…
New Battle Tech
We already presented two ball throwing battle techs at our last update. This time we got one for close combat:
It’s probably not hard to guess the inspiration here. :P
Talent Tree Planning
CrossCode will feature a talent tree used to learn quite a large number of passive talents as well as battle techs. GFlügel took the initiative this time, throwing large, number-overloaded spreadsheets at us… all for planning our talent trees in more detail. Oh and there’s a LOT to plan: number of talents, talent cost, distribution among the different trees (there is one per element and a neutral one) and so on…
So thanks to the power of spreadsheets we now got a pretty clear picture of our talent tree at least in terms of amount of talents and distribution. I’m pretty sure we’ll adapt the actual content of the talent trees continuously over the course of development. After all, this is critical for good balancing.
R.D. improved several details on the equipment menu which is getting close to completion. Now he helps on the map graphics side, improving the layout and graphics of the cabins.
And that’s it for this weekly!
We will post the next update early next year and it will be a big one! We’ll present a summary of all changes in 2013 with video content and everything! … Now this will be a bit more work and since we have holidays in between, it might take a bit longer for us to prepare this update, just so that you know!
Till next time!
I kinda wonder if we should change the name of our update to Bi-Weekly Update #Number…
Hey there! Two weeks have passed and we even made some progress! Like always the equipment menu is coming along nicely (even if there are some slowdowns due to real-life work) and for the first time ever we have battle techs implemented! This time we’d also like to share the first concept art from our new artist with you!
Over the last 2 weeks my goal was to finally let Lea equip items in the equipment menu. This includes displaying all items you currently have in a list, previewing the item you want to equip (showing the stat changes and so on) and actually equipping it. Long story short: You can now equip stuff! Why don’t you have a look at the latest WIP pictures?
Hovering over an item will display the absolute change for each stat. This also includes the elemental resistance and the modifiers. The resistance is capped at -100 and 100. Meaning you can only receive double or half damage for the raw equipment resistance. However you can increase the elemental defense further with buffs or switching to a specific element mode.
Also, as you can see, modifiers will give you additional abilities like faster aim or a boost for experience. We are not sure if we add a limit to how much modifiers you can equip so far, but we want to balance the equipment to make them more important so a limit is not necessary. We also have the idea to add the icon of the currently equipped gear on the appropriate button in the middle screen. These are mainly used to quickly navigate to the body part with the mouse, but an additional icon would make it easier to see if you have something equipped or not.
Next to some secret stuff (*hint* *hint*), Lachsen was working a lot on the battle techs lately. To give you a reminder, battle techs are the skills you can use by holding down the charge button (which is Space on the keyboard and the Right Trigger on the controller) while doing any normal action like close combat a throwing a ball. The battle techs will change based on what element mode you use, so there will be a vast amount of techs for you to explore.
Why don’t we have a look at some gifs?
Lea is charging! What you can’t see in this gif is that the time actually slows down while charging. This gives you some time to decide on what you want to do. Note that the charge effect is WIP. We aim to make it look as slick as possible.
Lea is throwing a large charged ball (WIP graphics here)! The ball will go through all enemies and damage them along the way. Battle techs have an increased damage factor as you might guessed, so they’re good to take down multiple enemies.
But what if there not aligned?
Leas uses another battle tech, which spawns a lot of small balls in a small arc. Enemies can be hit multiple times by 2 or 3 balls and the range makes it useful if enemies swarm around you!
These are of course just examples and we might end up changing them, but they give you a small glimpse of where combat is going in CrossCode. To make it even more interesting you can now attack-cancel out of a dash too (next to dash canceling everything). This means you can do a close combat attack shortly after a dash.
Finally! Our first concept art to share with you (the first one including environment that is). Let’s get right to the point here:
and here is an idea of where this place is based on the image we showed in an earlier weekly:
Our new artist is the great designer Solacy! She will help us out with environmental concept art from now on. Here is a link to her DeviantArt page:
Aaaaand we’ve reached the end of the weekly! Hope you enjoyed your stay.
Until next time fellas!