How to animate tilemaps (SOLVED)

illuminae · May 27, 2019, 12:01pm

I saw this person who has a git that is suppose to animate tilemaps but I have no idea on how to use it at all

Can someone explain what I can do to make tilemaps animate

Pkeod · May 27, 2019, 12:51pm

You can set the tiles manually to be different on a looping timer.delay for animated tiles.

The shader one uses an offset in the position to set the alternate frame.

This is where the offset is used

github.com

johnnyjr/defold-stuff/blob/master/animated tilemap/animated_tilemap.vp

uniform mediump mat4 view_proj;
uniform mediump mat4 world;
uniform lowp vec4 offset;

attribute mediump vec4 position;
attribute mediump vec2 texcoord0;

varying mediump vec2 var_texcoord0;

void main()
{
    mediump mat4 mvp = view_proj * world;
    gl_Position = mvp * vec4(position.xyz, 1.0);
    var_texcoord0 = texcoord0+vec2(offset.xy);
}

This is where it’s set

github.com

johnnyjr/defold-stuff/blob/master/animated tilemap/animate_tilemap.script

go.property("frames", 8)
go.property("delay", 4)
go.property("tilemap", msg.url())

function init(self)
	self.current_delay=0
	self.frame=0
	self.tile_width=1/((self.frames-1)*2)
end

function update(self, dt)
	self.current_delay=self.current_delay+1
	if self.current_delay>self.delay then
		self.frame=self.frame+1
		if self.frame>self.frames-1 then
			self.frame=0
		end
		tilemap.set_constant(self.tilemap, "offset", vmath.vector4(self.frame*self.tile_width,0,0,0))
		self.current_delay=0
	end

This file has been truncated. show original

It relies tiles to be at certain positions.

Just changing the tile image with a timer.delay to move between frames would be easier.

illuminae · May 27, 2019, 1:54pm

yes it was this git i have no idea how to use

what do i put in the go.property"frames"
and i put the url of the tilemap in go.property"tilemap"
also what else do i have to change for the script informations

Pkeod · May 27, 2019, 2:40pm

In this example, frames would be the number of animation frames your tilemap has in its cells.

I’ll make a working example in a few minutes.

Pkeod · May 27, 2019, 3:15pm

Here’s a working example for the UV. You will need to make sure you set the material properly as well as the proper url. This method doesn’t work well if you extrude your tiles which means you will want to use nearest neighbor sampling.

animated tilemap uv.zip (4.2 KB)

You can also of course use timer.delay() to go through tiles based on their frames… there would be many ways to do this. You could probably make a similar script or at least helper module to loop through all of the tiles and find the tiles which need to be animated over time. Then you loop through that once and update only those tiles per delay.

illuminae · May 27, 2019, 10:38pm

Omg thank u

illuminae · May 28, 2019, 3:03am

i fiddled around with ur project, so the delay sets the fps but when i change the frames nothing happens

Pkeod · May 28, 2019, 3:35am

Frames depends on the number of tiles on the horizontal row of the tileset. In this example there are only 2 frames.

@Johan Do you remember how you used this method? I assume you put animated tiles on their own tilemap and then static on another below it with each their own tilesets?

@illuminae You should still explore using timer.delay to swap tiles. Try and figure out how you can search a tilemap to find tiles you should animate, and then figure out how to animate them over time based on number of frames they should have. I might make a module to help with this in the future… but anyone else could too!

illuminae · May 28, 2019, 5:03am

okay thank u very much -(uwu)-

Johan · May 28, 2019, 10:29am

Yes, the animated tiles was on a separate tilemap than static tiles. The reason for not using timer.delay is simple: that api wasn’t around when I wrote this.