Saving plugin space using Animations

Learn here how to create and use plugins.

Moderator: Plugin Moderators

User avatar
The26
Inhabitant of a Megacity
Reactions:
Posts: 181
Joined: 23 May 2018, 22:18
Location: Lithuania
Plugins: Showcase Store
Version: Beta

Plugin Creator

Platform

Saving plugin space using Animations

#1

Post by The26 »

:img :json

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
image.png (8.56 KiB) Viewed 1678 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
image.png (10.25 KiB) Viewed 1678 times
2. The top
image.png
image.png (7.03 KiB) Viewed 1678 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
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
I made the base a bit darker to make it easier to differentiate the base from the top.
image.png
image.png (11.86 KiB) Viewed 1678 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
image.png
image.png (26.98 KiB) Viewed 1678 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
And now we have the very tall variant that we wanted!
image.png
image.png (47.76 KiB) Viewed 1678 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
Here are the building graphics themselves:
buildingbase.png
buildingbase.png (304 Bytes) Viewed 1551 times
buildingtop.png
buildingtop.png (306 Bytes) Viewed 1551 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!
Last edited by The26 on 18 Apr 2022, 16:49, edited 2 times in total.
User avatar
TheFennekin
Neighborhood fox
Reactions:
Posts: 2728
Joined: 24 Aug 2017, 11:17
Location: Wandering around
Plugins: Showcase Store
Version: Beta

Plugin Creator

Platform

Re: Saving plugin space using Animations

#2

Post by TheFennekin »

Hooray!
Post Reply Previous topicNext topic

Return to “Tutorials and Documentation”