Coding Game
Transitioning from a pure graphic design background to a high-intensity game development environment presented a steep learning curve. The challenge was not just to design beautiful assets, but to bridge the gap between static art and functional code. I had to master HTML, CSS, and basic TypeScript to collaborate effectively with backend developers and animators, ensuring that my creative vision could actually be launched and managed within the live game engine.
My objective was to evolve into a Technical UI Specialist who could serve as a vital bridge between design and production. Working closely with developers, animators, and QA, I aimed to synchronize our workflows so that no stage of the project was blocked. I focused on streamlining the handoff process by mastering the configuration of JSON and config files, ensuring efficient asset optimization, seamless localization, and proper data integration from the server.
I developed a hybrid workflow that integrated graphic design with technical execution. By gaining direct access to the game repository, I managed my own Git commits and Merge Requests while using HTML, CSS, and TypeScript to fine-tune UI in real-time. This end-to-end autonomy allowed me to refine asset delivery, optimize configuration files, and ensure that every visual element performed flawlessly within the live game environment.
Splash screen
Beyond the visual layout, the role involves full responsibility for the technical architecture of the UI components. This includes managing the localization pipeline by assigning HTML keys to all text and image assets and generating structured JSON files. Such a workflow significantly simplifies the translation process for global markets. A key part of this technical task is ensuring the correct syntax for dynamic data, where specific IDs are unified with the back-end developers. This allows the UI to pull real-time data from the server—such as RTP percentages, win caps, and payout values—which are automatically calculated based on the player’s bet and game mathematics. Handling the logic behind these keys ensures that the interface is not only visually consistent but also technically synchronized with the game’s core engine.
UI Enhancements
Performance Optimization
Working on complex game sequences like Win celebrations, Intros, and Outros requires close collaboration within the team. In this workflow, the Animator prepares the core animations and placeholders (defined in dialog.json, dialog.atlas, dialog.png), which the Developer then integrates into the correct game scenes. Once the configuration files are ready, I take over to handle the visual styling using Pixi.js.
My focus at this stage is creating dynamic typography that perfectly matches the original design mockups. By using dynamic fonts instead of static localized images—a common but inefficient practice in the industry—we significantly reduce the game's memory footprint and loading times. I also manage the localization keys within these styles from the start, ensuring the game is ready for global markets without the manual overhead of creating unique assets for every language. This approach not only streamlines the production pipeline but also ensures a high-performance, scalable product that remains visually stunning across all locales.
Bitmap Font Development & Git Workflow
Beyond dynamic fonts, I specialize in creating high-quality Bitmap Fonts for critical UI elements like win counters. The process begins in Photoshop, where I meticulously align each character as separate layers to ensure visual consistency. To eliminate repetitive manual tasks, I utilize custom scripts that streamline the asset preparation. Using specialized glyph tools, I precisely calibrate kerning, offsets, and x-advance settings. This technical precision is vital for slot games: it ensures that when a win is counting up, the numbers remain perfectly stable and "flow" smoothly without any jittering or jumping.
Once the .fnt and atlas files are exported, I take full ownership of the implementation. I have direct access to the game repository, allowing me to integrate the fonts and fine-tune their sizing and positioning in a live environment. My workflow is fully integrated with Git, including pulling the latest updates, running the game locally for testing, and managing my own commits and Merge Requests. This end-to-end autonomy ensures that the final "big win" animations look exactly as intended and perform flawlessly within the game engine.
Icons & Game preview
