Elven Riches Mobile Slot Game:
Animations
At Playtech, I had the rewarding opportunity to create animations for the Elven Riches Mobile Slot Game. I designed engaging animations for the highest winning symbols, blending technical skill with a deep understanding of game dynamics. Here’s an overview of my process:
Drawing Thumbnails:
To begin, I sketched thumbnails to plan the movement, ensuring that each animation flowed seamlessly and enhanced the gameplay experience.
Recording Reference:
Understanding the importance of realistic movement, I recorded myself performing the actions to capture the intricacies of body mechanics. This reference helped me identify leading and following actions, as well as how to introduce secondary actions to enrich the animation.
Creating Particle Animations:
Using Trapcode Particular and After Effects, I created and optimised the particle animations, ensuring they were both visually striking and efficient for gameplay.
Exporting Images from Photoshop:
Demonstrating my skill in asset optimisation, I prepared and exported the images for the three highest-paying symbols with precision. After exporting them as .json files, I imported them into Spine, where I brought these symbols to life with smooth, dynamic animations that engage and entertain players.
Spine Animation:
In Spine, I focused on creating efficient animations by using a minimal number of bones and vertices in the meshes. This approach helped reduce the processing load while maintaining the quality and fluidity of the animations. The careful planning of mesh behaviour and bone structure allowed for optimised performance without sacrificing visual appeal.
Export to Spine-Pixi Runtime:
After completing the animations in Spine, I exported them to the Spine-Pixi runtime. During this process, I linked shared particles to the same bone name and hierarchy in PixiJS, ensuring consistent behaviour across different animations. By utilising shared atlases and optimising the texture size and format, I significantly reduced the file size, resulting in faster load times and a smoother gameplay experience.
These elements highlight my commitment to creating detailed, efficient, and visually compelling animations that elevate the gaming experience.
Please note that while I animated the symbols, I was not responsible for creating the original artwork.
Optimising Animations
Animation Efficiency:
Keyframe Management: By focusing on key poses, anticipations, and breakdowns, I minimised the number of keyframes, using graph editor curves to ensure fluid transitions. This approach allowed me to create efficient animations that maintain visual appeal while reducing the workload on the game engine.
Animation Length: I kept animations concise, with a maximum of 105 frames (approximately 3 seconds), ideal for the fast-paced environment of slot games.
Mesh Optimisation:
Vertex Count: I optimised meshes by carefully placing vertices only where necessary, particularly in areas requiring more deformation, while reducing them in static areas to conserve resources.
Mesh Planning: Thoughtful planning of mesh behaviour allowed me to efficiently use vertices, avoiding unnecessary memory usage and ensuring smooth performance.
General Optimisation:
Efficient Mesh Binding: I ensured that when binding meshes to bones, the vertex count was kept to a minimum, allowing for the intended deformation without compromising on quality.
Avoiding Unnecessary Meshes: To save on memory and processing power, I avoided creating meshes unless absolutely necessary, always keeping performance in mind.
Through these optimisations, I demonstrate my ability to balance creativity with technical efficiency, ensuring that the animations not only look great but also run smoothly within the game's constraints.
Top Winning Symbols Animations
For the top winning symbols in Elven Riches, I started by dissecting the symbols in Photoshop. After exporting them as .json files, I imported them into Spine. There, I rigged and animated each symbol, ensuring that the movements were both smooth and dynamic, enhancing the overall gameplay experience. This process showcases my expertise in both technical animation and creative design.
Animation Optimisation Summary
General Approach: For each animation, I optimised performance by removing every second frame where applicable, effectively reducing the overall frame count without compromising visual quality.
Knight Symbol:
Knight Symbol:
Lightning on the Sword
Original Animation: 52 rendered frames.
Optimisation: By identifying a repetitive pattern in frames 9-14, I looped these frames, reducing the total number of rendered frames.
Final Result: 14 rendered frames, significantly decreasing the rendering load while preserving the visual impact.
Slash (Motion Trail)
Original Animation: 25 rendered frames.
Optimisation: I replaced the sequence of frames with a single dynamic image in the background, enhanced by clipping techniques.
Final Result: This approach eliminated the need for multiple frames, optimising the animation to use just one background image with dynamic clipping.
Clash
Original Animation: 36 rendered frames.
Optimisation: I halved the total number of frames by removing every alternate frame.
Final Result: 18 frames, achieving smoother performance with minimal loss in animation fluidity.
Archer Symbol VFX Animation Optimisation
Spark Emitter – Arrow Charged
Original: 29 frames
Optimisation: Reduced the frame count by 50% through the removal of every second frame.
Final Result: 15 frames, maintaining visual fluidity while significantly reducing resource usage.
Fire on the Arrow
Original: 19 frames
Optimisation: Implemented an alpha fade-in effect using a single PNG for the first 4 frames, adjusting scale and opacity, and subsequently removed half of the remaining frames.
Final Result: 9 frames, preserving the dynamic effect with a more efficient frame structure.
Backfire after Shot
Original: 38 frames
Optimisation: Reused a similar particle animation from the Knight Symbol, integrating it into a shared atlas, which eliminated the need for additional frames.
Final Result: 0 new frames, achieving consistency across symbols and reducing overall file size.
Key Benefits: These optimisations demonstrate my ability to strategically reduce frame count and optimise animations, resulting in enhanced performance and efficiency without compromising visual quality.
Elven Queen Symbol VFX Animation Optimisation
Magic VFX – Blue and Purple Queen Clash:
Original Animation: 89 frames.
Optimisation: I removed half of the frames and repurposed the pulsing effect from frames 20-40, reusing it for other pulses within the sequence. The animation was then looped and sped up, reducing the need for additional frames.
Final Result: 35 frames, effectively decreasing the frame count while maintaining the dynamic visual impact.
Texture Atlases:
Separate Atlases
Strategy: I created individual atlases for each skeleton, while implementing a shared atlas for some of particles used in the Archer and Knight symbols. This approach optimised resource usage across different animations.
Spine Exporting and Optimisation
Process: I exported and optimised the atlases to minimise file size without sacrificing quality. By utilising shared atlases for common elements like weapons and particles, I further enhanced efficiency.
Final Result: Optimised atlases that were integrated into the final game, leading to reduced load times and consistent visual quality.
Texture Packer Techniques
Implementation: I enabled rotation in Texture Packer to ensure no empty space was wasted in the atlases, maximising efficiency.
Additional Techniques: I created smaller, stretchable versions of clouds and blurred images to optimise space usage.
Final Integration: The animations were created using Trapcode Particular, exported, scaled down, and optimised for performance. Shared atlases were then integrated into PixiJS environment, linked to the skeletons via JSON, ensuring smooth and efficient animation playback.
Sharing Atlases Between Spine-Pixi Runtime:
Particles Animation:
I attached particles to the bone with the same name, ensuring consistent behaviour across different animations.
Folder Structure:
In my project, I organised the images folder to mirror the structure of the Spine project file, ensuring seamless integration.
Image Optimisation:
I cropped dead space on some images and used TinyPNG to compress the atlases, resulting in a significant size reduction of 72%.
Result:
The atlases for three symbols initially totalled 2.7MB, and after optimisation and compression, the final size was reduced to 739KB—just 28% of the original size.
Export to Spine-Pixi Runtime:
Shared particles were linked to the same bone name and hierarchy in PixiJS, ensuring efficient animation playback without redundant assets.
The image below illustrates how I effectively linked two atlases to a single skeleton for both the Knight and Archer symbols.
*below you can see the shared particles atlas between two Symbols
Finalised Game: Mobile Screen
In the final integration phase, I optimised the animations and textures to ensure they functioned seamlessly on mobile devices, enhancing the overall gaming experience.
