scrolling animated tiles

[daniel120]

i can't find a good example. i'm looking for something like this:

in the background you can see there is a scrolling background made up of animated tiles. If I wanted to recreate something similar in game maker studio, would I make a bunch of moving objects with the same animation or is there a better way?

 

[jo-thijs]

Hi and welcome to the GMC!

You can use tile_layer_shift to shift a bunch of tiles at once, but I think objects would be easier here.

 

[daniel120]

yeh but I thought you couldn't animate tiles and having too many objects on screen is bad :/

 

[jo-thijs]

Tiles canot conveniently be animated in GameMaker no.
And having too many objects on the screen is indeed bad,
but you'd really need a lot of them for it to matter on most devices.
The amount in the gif you posted should be fine.

 

[bojack29]

You could have a 2d array as large as the number of duckling on screen to draw. The first element keeps track of the x coordinate and the second element keeps track of the size of the duck.

Then simply loop thru the array and draw the ducks at the proper size and location. Wrap the x of the duckling if it goes off screen.

Something like this:

for(var a = 0;a <= arraySize;a ++){
     draw_sprite_ext(spr_duckling, 0, duckling[a, 0 ], duckling[a, 1], duckling[a, 2], duckling[a, 3], 0, 1);
     duckling[a, 0] --;
     if (duckling[a, 0] < 0){
          duckling[a, 0] = room_width;
     }
}

 

[daniel120]

I like using an array. Just so you know, several "ducks" are part of one image. They're not individual, but that should only affect the size.

Only problem is you forgot animation. Since this is controlled by at least one object, maybe I could add a subimg index that raises with an alarm and resets at the last subimg.

Thank you. I'll leave this open in case someone has an even more efficient answer.

 

[bojack29]

The animation deal is easy. Simply add another piece of the array and increment it by a tiny value like .015

 

[daniel120]

another piece? Like a nested array?

And why would the value be a decimal if you are trying to change the image index?

 

[bojack29]

Because thats how image index works.

image_index is calculated as

image_index = floor(image_speed mod (image_number - 1));

And image speed just climbs forever.

So if you introduce a number that grows slowly it will work in the same way as image_index

A variable that is .15 is an image_index of 0. So is .73724 and so is .82018. A variable such as 1.27365 is an image_index of 1. Etc

 

[daniel120]

Nevermind, there is seriously a method for this built in gamemaker: draw_sprite_tiled_ext()
All I have to do is have an x, y, and sub_img variable and increase it every step.

EDIT: There's a graphical glitch when moving a sprite that's tiled. Maybe it's because it isn't fast enough but there's a line that looks like it's moving up and updating the sprites. Can I fix this?

 

[daniel120]

This is what I'm talking about:

The messed up graphic is the line in the middle. You can see the sprites on top catching up with the bottom half

 

[bojack29]

Why not do my suggestion?

for(var a = 0;a <= arraySize;a ++){
     draw_sprite_ext(spr_duckling, duckling[a, 0], duckling[a, 1], duckling[a, 2], duckling[a, 3], duckling[a, 4], 0, 1);
     duckling[a, 0] += .15:
     duckling[a, 1] --;
     if (duckling[a, 1] < 0){
          duckling[a, 1] = room_width;
     }
}

 

[daniel120]

It's the same result.

 

[bojack29]

No it is not. Simply randomize the values on a create event and your good to go. Throw that code into the draw event and your done. It takes care of animations and everything. The ducks will even move across the screen. Did you even notice it was different than my last code?

 

[jo-thijs]

The line thing looks like a vsync thing.
Have you turned vsync on?
I'm guessing not.
Try turning vsync on in the global game settings.

 

[TheouAegis]

If you are drawing the sprites using a changing x and y value, then you need to round off the x and y values when you draw them. What bugs me about that screenshot is it indeed looks like a vsync issue, but it appears in the GIF. I'm not sure, but I think vsync is like ghosting in that it won't show up in the screenshots, but I could be wrong. But the fact that bojack's code supposedly causes the same issue and he's incrementing x and y by fractional values, I think not rounding x and y is the issue.

 

[daniel120]

I turned on vsync and no dice

@bojack If I wanted everything to be tiled perfectly and moved in unison then using draw_sprite_tiled would be cleaner. However, if the ducks were individual sprites, separated from the background color, and spawned in random locations, yours would be good.

I think there's a slight misunderstanding on we perceive the tiles to be generated. In the last example I posted, my tile looked like this:

Then I used the draw_sprite_tiled() to tile it. I do not need individual dots spawning randomly over a separate blue bg, but I may still use your script for something else. Of course, the real sprite is animated, and for that I will use your suggestion to take the image_index and increment it by a small value ie. .015.

 

[daniel120]

If you are drawing the sprites using a changing x and y value, then you need to round off the x and y values when you draw them. What bugs me about that screenshot is it indeed looks like a vsync issue, but it appears in the GIF. I'm not sure, but I think vsync is like ghosting in that it won't show up in the screenshots, but I could be wrong. But the fact that bojack's code supposedly causes the same issue and he's incrementing x and y by fractional values, I think not rounding x and y is the issue.

Round it how? I start from 0 and increment it by 1, so isn't it an integer?

 

[TheouAegis]

What's your full code that handles changing x and y too?

 

[daniel120]

literally just literally also yes

Draw Event:
xx++;
yy++;
draw_sprite_tiled_ext(sprite, 0, xx, yy, 1, 1, c_white, 1);

 

[TheouAegis]

Oh wait, I wonder if this is the same issue I had with my seamless world demo a few years back in GM8. How did I fix that......

 

[bojack29]

If you need uniform layouts for drawing the sprites simply order the x values in the create event uniformly.

//Create
for(var a = 0;a <= arraySize;a ++){
     duckling[a, 1] = a * 32;//Starting x
}

If you draw them seperate and apply the same wrap and speed they will all move in uniform

 

[daniel120]

This is what I'm talking about:

The messed up graphic is the line in the middle. You can see the sprites on top catching up with the bottom half

This is really weirding me out. The resolution I used in my example is 240 x 160. If I change resY (160) even by a difference of 1, it fixes the graphical glitch. Changing resX doesn't matter. The glitch only exists when resY is 160 (EDIT: 320, and 640 also), at least to my knowledge.

Does anyone know why? I want to use 240x160 because that is the Gameboy Advance resolution. Also I don't think the sprite size matters. It was originally 64x64 but when I set it to something random the same bug occurs.

 

[TheouAegis]

Is this a view resolution or the window resolution? If it is a view resolution, then yes I am familiar with it. You would need to turn on interpolation if you do not want to remove one pixel from the size of The View.