[REVOLUTION] 🎬 ANIMATED EVENTS in Age of History 2! Unlocking the Engine's Hidden Power!

[Katiowa 1]

Hello Programmers, Comrades and Modders!

For years, we have been creating scenarios and events restricted to static images. We add a picture of a war, and it just sits there. A picture of a nuclear explosion? Static. But not anymore.
 

I have been digging into the source code and I realized something crucial: Age of History 2 runs on LibGDX.

Why does this matter? Because LibGDX natively supports complex animations via TextureAtlas and Animation classes. The code was always there, sleeping inside the game engine, just waiting for someone to wake it up.

I have successfully implemented fully animated, looping events without breaking the original game compatibility.

 

🚀 What I Achieved

I modified the Menu_InGame_Event.java class. The logic is simple but powerful:

1. When the game tries to load an event picture (e.g., war.png), my code first checks if a .atlas file exists with that name (e.g., war.atlas).
2. If it exists: It ignores the static image and loads the SpriteSheet using the Atlas, creating a smooth loop animation.
3. If it doesn't exist: It falls back to the default code, loading the static .png or .jpg just like the vanilla game.

This means you can have animated events and static events in the same scenario without any bugs!

 

// Logic inside Menu_InGame_Event Constructor
String sEventRawName = CFG.eventsManager.getEvent(EVENT_ID).getEventPicture();
String sBaseName = sEventRawName; // remove extension logic...

// Check if the .atlas exists
if (Gdx.files.internal("UI/events/" + sBaseName + ".atlas").exists()) {
    // Load the Atlas and create the Animation
    this.modAtlas = new TextureAtlas(Gdx.files.internal("UI/events/" + sBaseName + ".atlas"));
    Array<AtlasRegion> regions = this.modAtlas.findRegions(sBaseName);
    this.modAnimation = new Animation(0.15f, regions, Animation.PlayMode.LOOP);
    this.isAnimatedEvent = true;
}

The Rendering (The Draw Method):
We use stateTime (delta time) to calculate which frame to show:

In the draw() method, instead of drawing the static Image object, you use the stateTime (delta time) to get the current frame from your Animation and draw it using the SpriteBatch.

// Inside the draw() method
if (this.isAnimatedEvent && this.modAnimation != null) {
    this.stateTime += Gdx.graphics.getDeltaTime();
    TextureRegion currentFrame = this.modAnimation.getKeyFrame(this.stateTime, true);
    
    // Draw the current frame
    oSB.draw(currentFrame, x, y, width, height);
    
    // Force the game to keep rendering (otherwise it pauses on static screens)
    CFG.setRender_3(true);
}

📂 How to make your own Animations

You don't need to be a coder to use this once the code is in the game. You just need:

1. A SpriteSheet: A PNG containing all frames of your animation.
2. An .atlas file: This maps the frames. You can generate this using GDX Texture Packer (Use the Legacy settings/version, this is crucial!).
3. Place both in UI/events/.

I am attaching an example (SoldierRunning.atlas and SoldierRunning.png) so you can test it yourselves.

 

🌟 The Future

Imagine the possibilities:

• Events with soldiers actually marching.
• Nuclear explosions that animate.
• Flags waving in the event wind.
• News tickers scrolling.

The engine was always capable of this; we just had to write the lines to let it speak!

Although I used it for events, it's more than that and can be used in any other contexts or images!

I am not releasing my file, not because I wanna lock knowledge, it's because I think it's simple to people to do, and because my code is full of nonsense (like superevents, etc)
I will send a .gif file showing the use of it (what I achieved!)

Download the example files below!

SoldierRunning.atlas (first and last line are blank.) file:
 

SoldierRunning.png
size: 2048, 2048
format: RGBA8888
filter: Nearest, Nearest
repeat: none
SoldierRunning
  rotate: false
  xy: 2, 1478
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 7
SoldierRunning
  rotate: false
  xy: 2, 1109
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 14
SoldierRunning
  rotate: false
  xy: 502, 1478
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 19
SoldierRunning
  rotate: false
  xy: 2, 740
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 4
SoldierRunning
  rotate: false
  xy: 502, 1109
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 11
SoldierRunning
  rotate: false
  xy: 1002, 1478
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 9
SoldierRunning
  rotate: false
  xy: 2, 371
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 16
SoldierRunning
  rotate: false
  xy: 502, 740
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 1
SoldierRunning
  rotate: false
  xy: 1002, 1109
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 6
SoldierRunning
  rotate: false
  xy: 1502, 1478
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 13
SoldierRunning
  rotate: false
  xy: 2, 2
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 18
SoldierRunning
  rotate: false
  xy: 502, 371
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 3
SoldierRunning
  rotate: false
  xy: 1002, 740
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 10
SoldierRunning
  rotate: false
  xy: 1502, 1109
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 8
SoldierRunning
  rotate: false
  xy: 502, 2
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 15
SoldierRunning
  rotate: false
  xy: 1002, 371
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 5
SoldierRunning
  rotate: false
  xy: 1502, 740
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 12
SoldierRunning
  rotate: false
  xy: 1002, 2
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 17
SoldierRunning
  rotate: false
  xy: 1502, 371
  size: 498, 367
  orig: 498, 367
  offset: 0, 0
  index: 2

Let's modernize Age of History 2!