CrossCode Update #43
Content Here!

Welcome back!

Finally it is time for a brand new CrossCode update! We’ve been working a lot on new content, such as a training session with captain Jet, the first boss battle, a complete new area, and the circuit menu.

Training with Jet, boss battle and new area

You might not know it, but Jet is pretty good at throwing balls, too. This is why Lea gets an extra training session with him, going through some advanced combat mechanics. In contrast to the tutorial in the cargo hold, this will all happen on the deck of the cargo ship. The idea is to give the player a better understanding of mechanics so he can pummel enemies more effectively. It is also a part of the plot so we aim to create a good mix of both tutorial and story. If you already know the mechanics you will be able to skip through the tutorial bits, while new players will get an optional “how-to” part.

How this looks, you ask? Something like this:

In this task, your goal is to hit the target-bot 10 times in quick succession. If you have too many misses or take too much time, the captain will show you how you can quickly fire multiple shots while retaining your aim.

For the boss battle we do not have that much information for you. We sketched out its design and discussed on how you fight this boss (hint: attack its weak point for massive damage). Over the coming weeks we plan to actually integrate the boss into the game. However this comes with a new addition to our engine which enables handling animations and entities with multiple parts or sprites. So it might take some time.

As for the new area is the first one outside of the cargo ship. It’s in a very rough state as of now and we just started creating assets for it. This means our graphics artist work on creating the environment and details. We will show you more of this area as soon as we got something more fleshed out. Until then we can already tell you that the region is influenced by Japanese gardens mixed with a futuristic setting.

Circuit menu and something familiar

The circuit menu comes along nicely. We pretty much finished the overview menu. Here is a quick picture of the current state of the menu:

As you can see, there are already 2 element trees done. Adding the other 2 is basically nothing more than adding one line of code for every tree.

While I was coding the overview menu, Felix and I realized that the detail view we showed in CrossCode Update #41 could be a real challenge performance wise. The amount of GUI elements would quickly reach a number that could be a serious bottleneck because of the sheer number of skills. Because we knew that eventually we come to the point where this problem would occur on other GUI elements as well, Felix optimized the GUI system… again. He abstracted the way GUI elements are drawn, which oddly enough increased the performance a lot. This new change also makes it easier for us to change the render context in case we want to implement a WebGL solution for the rendering. So, good news for everyone! We have a much nicer syntax to draw things on the screen and you get better performance (If you interested in more information, leave a comment).

And that’s it for this update! Hope you enjoyed reading it!


  • “He abstracted the way GUI elements are drawn (…)”. Could you elaborate just a bit what it means to “abstract” the way how elements are drawn? Maybe with a simplified code example, if that’s even possible? Otherwise great post as always.

    • Of course!

      Before the change every GUI element had a separate draw method. This means that we walked through the complete GUI tree and called the draw method (if the GUI element was visible). The same goes for the update method so we actually traversed the tree twice per frame… recursively. We had to implement the drawing by hand (e.g. we have a graphics object and we also had to use: this.image.draw()). For every GUI element we also used context transformation to position the element relative to its parent (follow this link to see how we implement GUI element before the change).

      Now we have a separate GUI-Renderer class. Instead of a draw method, we now have a updateDrawables method. This method is called in the same loop in which the update method for all GUI elements is called (Saving on recursive pass). In this method we can add a drawable- or transform object to a queue. On this object we set the properties for an image or transform. no in the render step of the game, we simply traverse through a flat array and draw everything that is in the queue of the renderer. We don’t use context transformation with this anymore (unless it is a transform object of course). Instead we calculate the draw position based on the position given in the drawable object and the parent element.

      So instead of this:

      draw: function(){
          this.gfx.draw(0, 0, 0, 120, 120, 50);
          ig.system.context.fillStyle = 'black';
          ig.system.context.fillRect(120, 0, 120, 50);
          this.gfx.draw(240, 0, 120, 120, 120, 50);

      we have this:

      updateDrawables: function(renderer){
          renderer.addGfx(this.gfx, 0, 0, 0, 120, 120, 50);
          renderer.addColor("black", 120, 0, 120, 50);
          renderer.addGfx(this.gfx, 240, 0, 120, 120, 120, 50);

      It is a much nicer way to code for us, since we don’t have to use any “low-level” calls to the context. It makes it also easier to port the rendering to different render contexts (like WebGL).

      I hope this clears it up a bit. In case you still have questions, we might create a new technical about it :D

Post a Comment

Your email is kept private. Required fields are marked *