How 2D and 3D Animations Are Created: From Concept to Your Phone
Every time you fire an assault rifle, draw a melee weapon, or reload a sniper rifle, you see the result of meticulous work by several teams, one of which is the animation team. Let’s peek behind the scenes and learn how these animations are created specifically for each weapon model.
Mobile Game Animation Features
Modern Strike Online is designed to work on phones and tablets, which places special requirements on animation creation. Animators must constantly remember:
- Players see animation on small screens
- Mobile devices have limited power
- Animation must be readable even during fast gameplay
How Weapons Are Animated
Planning Stage: From Idea to Technical Specification
Everything begins with a document from the game designer that describes the new weapon: what kind of assault rifle, pistol, or sniper rifle it will be, how it should shoot and reload, and what unique animations it should have in the idle state.
The head of the animation team studies the proposals and gives their comments:
- What is technically possible to implement
- What would be too expensive in terms of time
- What limitations do mobile devices have
The main goal of this stage is to ensure transparency and coordination between dev departments before active work begins.
Creating the Foundation: From Concept to 3D Model
After concept approval, the weapon is passed to concept artists and 3D modelers. Animators receive the finished model only third in line, but this time isn’t wasted, as animators are already working on proxy animation.
Secret of Efficiency: Proxy Animation
While artists are finalizing the weapon’s final model, animators create proxy animation – this is temporary animation on simplified geometry. Proxy animation – from the word proxy meaning representative, authorized, but we understand it as an object that temporarily replaces the working model.
Imagine an animator takes a simple rectangle, projects an image of the future assault rifle onto it, and animates it like a real weapon. This allows:
- Planning all weapon movements in advance
- Testing how the animation will look in the game
- Saving time at the final stage
With this approach, the team has additional time to try various ideas and prepare the main weapon movements in camera space. Animators will work out details and small movements at the ready model stage. This way, the team creates a comprehensive framework for work.
3D Weapon Animation: Technical Process
Model Verification and Rigging
When the finished 3D weapon model reaches the animator, the first thing checked is:
- Correct dimensions (important for mobile screen)
- Properly configured rotation axes
- All moving parts are present
Then rigging begins – creating a “skeleton” for the weapon. This is a system of bones and controllers that will allow the weapon to move correctly.
One interesting solution was made in this rig – when moving one controller through scaling, small blade elements automatically move.
Next, the animation team either copies the proxy animation they prepared earlier or creates new animation from scratch.
Three Stages of Creating Animation “From Scratch”
- Blocking – “What happens?”
The animator sets the main keyframes: where the weapon is at the beginning, middle, and end of the action. For example, for an assault rifle firing animation, this could be:
- Weapon at rest
- Moment of recoil
- Return to the initial position
- Blocking+ – “How does it happen?”
Intermediate poses are added between keyframes. At this stage, the following is shown:
- How heavy the weapon is (a heavy machine gun moves slower than a pistol)
- Character through the weapon (surprise, fear, or coolness of the character with the weapon in hands)
- Realistic movements
Also at this stage, timing work is added so that what was conceived fits the technical needs of the game. Each weapon has its own time frames for reloading, drawing, and putting away the weapon, and they are considered each time for each weapon unit.
- Final Polishing
Animation is perfected and gets approval from the producer, game designers, and the head of the animation department, then goes into the game.
2D Animation: Interface and Effects
Everything begins with a meeting between the animator and the artists. They discuss how the future animation will look: which elements will move, which will remain stationary, and how best to “slice” (divide) the image into separate parts. Let’s examine the animation process using the loading screen example.
Why is this important? If you initially cut the picture incorrectly, it will be challenging to put it back together and make it move beautifully.
Examples:
- New weapon animation in the menu
- Explosion and shot effects
- Moving interface elements
- Reward receiving animation
- Moving elements on the loading screen
Stage 2: Receiving and Thorough Art Verification
When artists transfer finished images, the animator performs a series of checks:
Check #1: Moving Element Boundaries
Smoke from explosions, dust from bullets, fire from shots – all these elements must have smooth edges. If the boundary is too sharp, when moving it will look unnatural, as if someone cut the picture with scissors.
Check #2: Hunting for Extra Pixels
Each image layer may hide transparent pixels invisible to the eye. They take up precious space in phone memory, so they need to be found and removed so the phone doesn’t get unnecessarily loaded.
Check #3: Game Engine Compatibility
The Spine program (used for creating 2D animation) only understands certain ways of layering images on top of each other. If the artist used other modes, the animator must fix this.
Optimization Stage – Saving Every Byte:
Trimming and Drawing Additional Details The animator studies each element and thinks: “Can this be done better?” Sometimes you need to trim the image, sometimes you ask the artist to draw missing details. The more precise the slicing, the fewer technical problems there will be later.
Selecting Repeating Elements. If the animation has many similar particles (for example, sparks from bullets), the animator keeps only 3-4 of the most beautiful variants. Why store 20 almost identical sparks when you can use 4 different ones in different combinations?
Trick with Blurred Elements. For elements without clear boundaries (glows, shadows, smoke), the animator can reduce them by 2 times, then stretch them back in the program. The file becomes 4 times smaller, and the difference is almost unnoticeable on the phone screen, making it easier for your phone!
Combining Stationary Parts. If some elements won’t move (for example, background), they can be glued into one image. This is necessary for the space economy.
Photoshop Export: A special PhotoshopToSpine script is used to transfer all elements from Photoshop to the animation program.
Stage 3: Rigging – Creating “Skeleton” for Flat Pictures
Flat pictures also need a “skeleton” so the animator can turn motionless pictures into puppets that can move.
Mobile Rigging Philosophy Main rule: players see animation on small phone screens, so don’t waste time on details that won’t be noticeable on small screens anyway. Better to make it simpler, but faster and more stable.
In Modern Strike Online, there can be many moving elements simultaneously (interface, effects, weapon animation). Therefore, you need to choose what’s really important to animate and what can be left static.
Workspace Organization The animator creates a convenient naming system for all elements and colors different bone groups in different colors. It’s like organizing tools – then working is much faster.
Stage 4: Creating Animation
At this stage, the “skeleton” comes alive! The animator can do practically everything:
- Move and rotate any elements
- Change their size
- Even change colors right in the animation
Working with Color in Animation: You can change element colors right during animation. For example, make the weapon glow when firing or change the interface color when receiving a reward. But you must use this carefully – too many color effects can slow down the game on weak phones.
Stage 5: Export – Preparation for Game
Packing into Atlas. The ideal option is to fit all animation elements into one “atlas” (a large image of all small pictures collected). It’s like collecting all tools in one box – faster to find and use.
Export Settings The animator configures many parameters: atlas size, compression format, and image quality.
Stage 6: Archiving and Transfer
Everything is then archived in specific folders and transferred to the following teams for work and animation integration into the game.
Additional Materials. Often, a high-quality animation video without an interface is added to all materials – this helps other specialists understand how the animation should look. For example, the Motion Design team is working on videos.
Game Integration
Unity Setup
After creation, animation enters the Unity game engine, where:
- Procedural animations are added (automatic camera shake when shooting)
- Synchronization with game mechanics is configured
- Performance is optimized for different phone models
Mobile Optimization Features
Modern Strike Online animators constantly balance between quality and performance:
- Animation should look beautiful on flagship phones
- But also usually work on budget devices
- File sizes should be minimal (necessary for downloading via mobile internet)
Conclusion
Every second of animation results from weeks of work by a team of professionals. From the first game designer sketch to final integration into the game, months pass, sometimes more. Multiple teams work on each weapon.
Now, holding your phone and playing Modern Strike Online, you know what a huge journey each weapon movement takes before appearing on your device screen. Behind every animation are people who think about making your game as exciting and smooth as possible, even on a small mobile phone screen.