Saving plugin space using Animations

Learn here how to create and use plugins.

Moderator: Plugin Moderators

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

Plugin Creator

Platform

Saving plugin space using Animations

#1

Post by rtobby »

: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 5036 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 5036 times
2. The top
image.png
image.png (7.03 KiB) Viewed 5036 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 5036 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 5036 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 5036 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 4909 times
buildingtop.png
buildingtop.png (306 Bytes) Viewed 4909 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 rtobby on 18 Apr 2022, 16:49, edited 2 times in total.

User avatar
TheFennekin
Neighborhood fox
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!

User avatar
burgernamn
Former aster dude
Posts: 175
Joined: 15 Apr 2022, 10:32
Plugins: Showcase Store

Plugin Creator

Platform

Re: Saving plugin space using Animations

#3

Post by burgernamn »

can this also be used on cars?

User avatar
ArthurJ22
Townsman
Posts: 82
Joined: 26 Oct 2020, 06:43

Plugin Creator

Platform

Re: Saving plugin space using Animations

#4

Post by ArthurJ22 »

burgernamn wrote:
03 Jun 2024, 11:36
can this also be used on cars?
What do you mean exactly?

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

User avatar
Kulche
Pluche
Posts: 1177
Joined: 07 Jun 2017, 20:28
Plugins: Showcase Store
Version: Beta

Plugin Creator

Platform

Re: Saving plugin space using Animations

#5

Post by Kulche »

yes cars very much support animations

User avatar
burgernamn
Former aster dude
Posts: 175
Joined: 15 Apr 2022, 10:32
Plugins: Showcase Store

Plugin Creator

Platform

Re: Saving plugin space using Animations

#6

Post by burgernamn »

ArthurJ22 wrote:
03 Jun 2024, 16:18
burgernamn wrote:
03 Jun 2024, 11:36
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

Post Reply Previous topicNext topic

Return to “Tutorials and Documentation”