Welcome on board to another episode of our weekly development series, where you will find the latest updates and news in Codyfight and discover the processes and mechanics that bring the game alive.
Previously on the Codyfight development series
Last week, our team focused on finishing up the base infrastructure for special tiles. This process was one of the highlights of the project so far, as it ultimately enriches and adds complexity to the metagame.
The final stage of the infrastructure is a multidimensional metagame where players can expect bigger and more complex maps, as well as the interaction of Codyfighters, skills, NPCs, and special tiles. Such interaction is produced through a process called action stacking where the player will enable different actions each round.
Back-end to Front-end: A tale on integration
Once the base infrastructure is finished, the integration process begins. This procedure essentially assures that all the data mechanics of the game can be translated visually to the Widget and therefore, to the user.
Two sides of the same coin
Integrating different systems from the back-end to the front-end is not an easy task and involves a good framework (see episode 1 for more information) and constant communication between the developers; those in charge of the logical structure — back-end developers, and those in charge of the visual representation — front-end developers.
The backend team deals with all the data information, its manipulation, storage, and transmission. They are the architects of the game and build the structure that allows it to function correctly. But a good architect needs a good worker to translate his vision into action. That’s where the front-end developers shine, as they receive the data from the back-end and implement them visually. But unlike the process of building a house, where workers take long periods to finish the plans of the architect, the developer’s communication process happens automatically thanks to the WebSocket protocol.
A WebSocket is used to transfer messages in real time from a server to a client. In Codyfight, the server is the backend, and the client is the Widget. Every time a user connects to the website and opens the Widget, he is receiving the information from the back-end in real time. Every click that a player performs in Codyfight is processed instantly by the back-end (server) and causes an immediate reaction on the screen.
A bridge between the user and the game
In the last article, we talked about the significance of the infrastructure and highlighted action stacking during the gameplay. Now users can trigger different consequences in the gameplay through the interaction of entities in the battle. Multiple events can be initiated with a player’s action and generate a butterfly effect. But how can this relate to the back-end and front-end integration?
All the actions that take place during a game are sustained by the back end and communicated directly to the Widget. Those actions are messages that get sent to the Widget in real time through WebSocket. Everything that players see in the game, from animation to sounds, movements, stats, etc. is supported by the back-end and rendered to the Widget so users can understand visually what effect each of their actions has in the gameplay.
While the spine of the game lies in the server, the Widget is the skin and the part that players can interact with. But the skin would be nothing without bones. Those bones are a big data block that developers can build upon and manipulate to keep the big organism of Codyfight alive.
While not everything that happens in the back-end is rendered to the front end, all the results that come out of the complex calculations of data are reflected on the Widget as the user makes different decisions in the gameplay. For example, if there is a map with 3 agents and it receives the message that another agent just spawned, it compares those two states and can render the spawning of the agent.
In the end, integration is highly important because it makes the infrastructure of the game interactive for the user and guarantees that he can enjoy the final stage of a dynamic game with a multidimensional meta. Such a desired end goal is only possible through smooth and constant communication between the back to the front end. Without the sketches of a house, there wouldn’t be a house. And without the back-end work, there wouldn’t be any game.
The visual miracle
While the architect of the game is the back-end, the front-end is the work that brings to life the plans of its back-end counterpart. But the worker does not only need a sketch to create the house but also the right materials. The front-end implements the messages received by the back-end, but still misses those materials: the game’s artwork.
The art team along with the UI/UX designer takes care of the art of the game, from the appearance of tiles to even the stats and icons displayed in the Dashboard. All the designs need to be implemented into the game along with the back-end data to create a functional product. For example, in the case of the base infrastructure, the special tiles have been previously crafted by our art team lead that sends them to the front-end team. Once the front-end receives the designs, they implement them with the back-end information, making sure that the tiles look polished, optimal, and clean in action. Only with the right materials and instructions, workers can fully unleash their potential to build an operative house.
Currently, the front-end team is taking care of the infrastructure integration to the Widget, as well as completing other processes in the Dashboard. It’s important to differentiate the Dashboard and The Widget, as the latter is where the gameplay takes place, while in the Dashboard, users can find information related to their ranks, stats, etc. These are different processes for the front end that require cooperation with outside team members.
While our back-end is currently testing and fixing the bugs that arise with the integration processes, the front-end is also working closely with the UI/UX designer to finalize the Dashboard as its majority (launchpad, inventory, documentation, leaderboard, etc) is completed.
Checking, testing, and catching bugs
During the integration process, it is also necessary to increase the testing and bug control through a close collaboration between the front and back end.
Even though each team member has a field of expertise, they are all part of a big system that needs to flow in the same direction. Any inconsistencies can make the game break, therefore quality assurance through testing is very important in any integration, as well as constant and close communication within the department.
In any major update, there will be unpredicted flaws, from glitches to major bugs. Developers correct those malfunctioning aspects from back-end to front-end, asking each other to tweak, enhance or improve certain features. The procedure also counts with the help of automated tests that check how the code functions autonomously. However, integration is a complex and hard process that can be stretched over time as the team faces important bugs or other aspects that need urgent corrections. This is the stage that the back-end is working on, along with the front-end. Once the integration is finished, there will be an overall quality assurance rundown to check the game in action with all the new features implemented.
Integration as the key to success
The base infrastructure is not only one of the most important systems for Codyfight but also the keystone for a complex meta that allows players to unleash their potential and creativity on the battlefield. On the other hand, the integration process is the bridge that will allow this end goal to happen.
Once everything is connected and runs smoothly, the game will finally turn into what we always envisioned it to be. We are almost there and we can’t wait to show you this important success.
Until then, stay tuned on our socials to discover our latest news and updates. And if you have any questions, our team is always here to chat and clear them up.
Thank you for catching up with us.
See you next week, and may Legendary Llama be with you!
Codyfight.
