Saving plugin space using Animations

[rtobby]

A very common issue with tall buildings is that they use up a ton of plugin texture space while having a lot of space and/or repeating floors. However, this common problem can be circumvented easily, however, the task is fairly tedious. I will be splitting up the guide into multiple steps to make it more clear.

Step 1: Drawing the animation.
So, let's say we have this building:

image.png (8.56 KiB) Viewed 5363 times

I know it's an eyesore, but accept this as just an example.
As you see, it has a very repeating texture. Now of course, since this building is tall, it will take up a considerable amount of plugin texture space.

Now we will split the building into two parts:
1. The base

image.png (10.25 KiB) Viewed 5363 times

2. The top

image.png (7.03 KiB) Viewed 5363 times

The base will always appear at the bottom once, while the top is going to be the repeating part.

Step 2: Defining the animation.

This is probably the easiest part! Keep in mind that it is IMPORTANT to define the animation and have the building itself in the same file!

Make sure to remember what ID you used for your animation.

Code: Select all    Reset

{
"type": "animation",
"id": "uniqueid",
"frames": [{"bmp": "buildingtop.png"}]
}

JSON checker

Check

Output: Select all

...

Step 3: Using the animation.

Now by far, the simplest way to use the animation is to just use `ian's Animation Dev Tool. You still have to define the building itself in your JSON file, however, once you do that, you'll be able to just find the building itself's ID, and then find your animation's ID and repeat it. I don't use the tool myself though, so I cannot guarantee an in-depth tutorial on using it. I'm sure that there are plenty of tutorials on how to use the tool, so make sure to check them out before using it.

If you want to do it yourself, you'll have to use the "animation" attribute to define where and what parts repeat. "id" is for defining which part is used, "x" and "y" are used to define the location of the repeated part.

Code: Select all    Reset

{
"animation": [{"id": "uniqueid", "x": 18, "y": -17}],
"id": "uniqueid1",
"type": "decoration",
"width": 2,
"height": 2,
"frames": [{"bmp": "buildingbase.png"}],
"draw ground": true
}

JSON checker

Check

Output: Select all

...

I made the base a bit darker to make it easier to differentiate the base from the top.

image.png (11.86 KiB) Viewed 5363 times

Since the top floor is 7 pixels tall, I'll add a new animation and lower the Y value by 7.

Code: Select all    Reset

{
"animation": [{"id": "uniqueid", "x": 18, "y": -17}, {"id": "uniqueid", "x": 18, "y": -24}],
"id": "uniqueid2",
"type": "decoration",
"width": 2,
"height": 2,
"frames": [{"bmp": "buildingbase.png"}],
"draw ground": true
}

JSON checker

Check

Output: Select all

...

image.png (26.98 KiB) Viewed 5363 times

Code: Select all    Reset

{
"animation": [{"id": "uniqueid", "x": 18, "y": -17}, {"id": "uniqueid", "x": 18, "y": -24}, {"id": "uniqueid", "x": 18, "y": -31}, {"id": "uniqueid", "x": 18, "y": -38}, {"id": "uniqueid", "x": 18, "y": -45}, {"id": "uniqueid", "x": 18, "y": -52}, {"id": "uniqueid", "x": 18, "y": -59}],
"id": "uniqueid3",
"type": "decoration",
"width": 2,
"height": 2,
"frames": [{"bmp": "buildingbase.png"}],
"draw ground": true
}

JSON checker

Check

Output: Select all

...

And now we have the very tall variant that we wanted!

image.png (47.76 KiB) Viewed 5363 times

Step 4: Concluding the tutorial.

Here is the full code:

Code: Select all    Reset

[
{
"type": "animation",
"id": "uniqueid",
"frames": [{"bmp": "buildingtop.png"}]
},
{
"animation": [{"id": "uniqueid", "x": 18, "y": -17}],
"id": "uniqueid1",
"type": "decoration",
"width": 2,
"height": 2,
"frames": [{"bmp": "buildingbase.png"}],
"draw ground": true
},
{
"animation": [{"id": "uniqueid", "x": 18, "y": -17}, {"id": "uniqueid", "x": 18, "y": -24}],
"id": "uniqueid2",
"type": "decoration",
"width": 2,
"height": 2,
"frames": [{"bmp": "buildingbase.png"}],
"draw ground": true
},
{
"animation": [{"id": "uniqueid", "x": 18, "y": -17}, {"id": "uniqueid", "x": 18, "y": -24}, {"id": "uniqueid", "x": 18, "y": -31}, {"id": "uniqueid", "x": 18, "y": -38}, {"id": "uniqueid", "x": 18, "y": -45}, {"id": "uniqueid", "x": 18, "y": -52}, {"id": "uniqueid", "x": 18, "y": -59}],
"id": "uniqueid3",
"type": "decoration",
"width": 2,
"height": 2,
"frames": [{"bmp": "buildingbase.png"}],
"draw ground": true
}
]

JSON checker

Check

Output: Select all

...

Here are the building graphics themselves:

buildingbase.png (304 Bytes) Viewed 5236 times

buildingtop.png (306 Bytes) Viewed 5236 times

If you want to make your buildings actually animated, refer to this tutorial by Kulche: viewtopic.php?f=41&t=10925

Also, keep in mind that if a building with animations is near the edge of the screen, the animations might disappear.

If there are any problems within this tutorial, please let me know and I'll try to fix them!

[TheFennekin]

Hooray!

[burgernamn]

can this also be used on cars?

[ArthurJ22]

can this also be used on cars?

What do you mean exactly?

If you mean trailers, or articulated vehicles, u should use Tail.

[Kulche]

yes cars very much support animations

[burgernamn]

can this also be used on cars?

What do you mean exactly?

If you mean trailers, or articulated vehicles, u should use Tail.

not exactly, what i mean is using the same technique used in this topic to replace a specific part of the vehicle to another