On December 10th, the day of Alfred Nobel, we honour the greatest benefactor of science in history by focusing on the critical stage of iGaming development production where design, art and animation is turned into code. Today our calendar topic is front end development.
When we last visited with our iGaming development team the focus was animation – the craft of turning static images into motion, making art come alive. When the processes of design, art and animation have reached their completion, the art and animation teams will upload all the material for coding. The material consists of many components called assets, containing all the finalized images: backgrounds, machine, low paying symbols, high paying symbols, wild symbols, bonus symbols, characters and other items. This includes all the graphic details such as how numbers look in different parts of the game (font and colour), art for information buttons, information texts, mobile menus etc. Then there are the animated assets – every movement of key elements in the game in various versions.
The assets are delivered according to certain specifications to the front-end development team. Front-end in simplified terms means the coding of everything in the game that you can see in your browser or app. Then there is back-end development which refers to the part you can’t see, the “back” of the house meaning the programming and managing of servers, communication between the database and the browser or app, and most importantly the math model which ensures the reliability and compliance of a game played for money. In this chain of production that starts with design and ends in back-end development and testing, the role of the front-end developer is to tie all pieces of the puzzle together by coding the game.
Featured image of the day is the desk of Gaming Corps’ Lead Developer and Front-end Specialist, Artem Fedorov. Artem’s first order of business when starting a new project is to put all the fundamental commands and mechanisms in place to make sure the basic functionality is there. He turns the design of the game into code via establishing a system that translates every instruction into a series of many small steps which together constitutes the desired result. Let’s say for instance the main character of a circus-themed game is a clown standing to the left of the machine, and one of the design requirements is that the clown smiles and tilts his head when the reels stop spinning. Then Artem needs to code every detail in that short sequence which covers everything from tying the action together with the spinning of the reels, to adding in the art and the animation and code exactly what happens in the requested order. Artem uses an application called WebStorm for the coding, complementing it with a framework called PixiJs which is like a library or engine for the interaction with the browser.
This first push of putting the basic functionality in place is an intense phase where for a few days Artem works predominantly alone. But then follows the bulk of the front-end development which is a collaborative process between artist, animator and developer. Artem points out that he has a roadmap for his work, but for the most part it is a completely iterative process and not a linear project. As soon as the coding for the foundation is in place, the developer needs to engage the rest of the team with all the changes big and small that needs to be implemented. In parallel comes the phase where another layer of functionality is put in place – unique features, special effects, modified mechanics etc. which even more requires the team members to work in parallel and very tight together. The developer will require new assets, such as for instance asking for an item to be separated from the background or an animation to be timed differently. The artist and animator will highlight where coding has resulted in an outcome that was not according to plan, and then the team will together find a solution forward. And so on. In this process there are of course also changes made to the original plan. The artist may conclude that now that he sees the symbols spinning on the reel, one of the symbols does not work and needs replacing. The animator might conclude that some animations should be removed and others added, to enhance a certain mood or alter the players’ experience once way or the other. The developer will be able to convey what works and what doesn’t, and give suggestions for improvements and changes. Then there is the major factor of back-end programming and testing, internal and external, which adds more team members to the project and also generates input, requirements and conditions which affect the work of the front-end developer. So from the point of the delivery of the assets, the job of the front-end programmer runs the entire rest of the process up until the very minute the game is deployed for our operators.
Just like our Art Director James, Artem has more than one screen to optimize his work process. The main screen is where he does the coding and it is devoted solely to that. The second one is where the staging link for the game is always running, so that as soon as he has completed another set of code or made any changes, he can see directly in the game how that turned out without having to move between programs. For the same reason he has a third screen with the purpose of trouble-shooting and testing specific bits of code. Casino games are very fast and there are many small steps involved in every action. Going back to our example of the circus-themed game and the clown which smiles and tilt his head when the reels stop spinning, Artem would then code the entire sequence on his main screen. Then he would implement the code and check it on the staging screen. If there is something off with the way the clown tilts his head, Artem can set what is called a break point in the code to investigate what is happening exactly at that point. The game will stop at the break point and on the third screen, Artem can evaluate the exact variable in the code that he needs to investigate for the tilt of the clown’s head, again without having to close the main programming screen. The work flows like this between the big picture and the small picture; between making changes in the code and testing how that turned out. So for the front-end developer the work is a technical construction process consisting of many, many small steps and check-points, alterations and iterations before the end result is reached.
We know what you must be thinking now. If you need two screens for art creation and three for front-end development, how many screens does it take for our IT Director Vincent to make sure that Gaming Corps’ games are safe and compliant with the license we hold? And how many screens do then our Quality Assurance Engineers Koss and Spiros have in the next stage for testing?? It is mind-boggling! However, you are going to have to wait for the answers a little while longer, so stay tuned!
