# Tile-based problem!

**URL:** https://forum.kirupa.com/t/tile-based-problem/261584
**Category:** flash
**Created:** [May 29, 2008, 2:10am UTC](https://forum.kirupa.com/t/tile-based-problem/261584 "2008-05-29T02:10:02Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Ph03nix](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@Ph03nix](https://forum.kirupa.com/u/Ph03nix)
#### Post date: [May 29, 2008, 2:10am UTC](https://forum.kirupa.com/t/tile-based-problem/261584/1 "2008-05-29T02:10:02Z")

</div>

I’m having a big problem with my tile-based game. I create tiles based on a 2 dimensional array. Each tile is a Movie Clip, created using attachMovie. The problem is that when there are many of these tiles, the game lags, because so many properties must be stored for each MC. Is there a better method for creating “tiles” than attachMovie, or a way to free the memory used for each one?

PS. First post!

---

<div class="post-metadata">

### Author: ![Gathan](https://avatars.discourse-cdn.com/v4/letter/g/df705f/32.png) [@Gathan](https://forum.kirupa.com/u/Gathan)
#### Post date: [May 29, 2008, 2:15am UTC](https://forum.kirupa.com/t/tile-based-problem/261584/2 "2008-05-29T02:15:17Z")

</div>

[quote=Ph03nix;2332769]I’m having a big problem with my tile-based game. I create tiles based on a 2 dimensional array. Each tile is a Movie Clip, created using attachMovie. The problem is that when there are many of these tiles, the game lags, because so many properties must be stored for each MC. Is there a better method for creating “tiles” than attachMovie, or a way to free the memory used for each one?

PS. First post![/quote]  
Yes its called tile scrolling, as in only loading the tiles that are going to be visible on one screen and everything beyond what isn’t visible to the use isn’t loaded.  
That way even with a large map the game wont lag like map when you scroll it because only the portion that is visible to the user is loaded.

---

<div class="post-metadata">

### Author: ![Ph03nix](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@Ph03nix](https://forum.kirupa.com/u/Ph03nix)
#### Post date: [May 29, 2008, 2:23am UTC](https://forum.kirupa.com/t/tile-based-problem/261584/3 "2008-05-29T02:23:27Z")

</div>

[quote=Gathan;2332772]Yes its called tile scrolling, as in only loading the tiles that are going to be visible on one screen and everything beyond what isn’t visible to the use isn’t loaded.  
That way even with a large map the game wont lag like map when you scroll it because only the portion that is visible to the user is loaded.[/quote]

I currently do something like that. The off-screen tiles’ “\_visible” property is set to false. Is this the wrong way to do it?

---

<div class="post-metadata">

### Author: ![Gathan](https://avatars.discourse-cdn.com/v4/letter/g/df705f/32.png) [@Gathan](https://forum.kirupa.com/u/Gathan)
#### Post date: [May 29, 2008, 2:34am UTC](https://forum.kirupa.com/t/tile-based-problem/261584/4 "2008-05-29T02:34:45Z")

</div>

> [@Ph03nix;2332775](#):
>
> I currently do something like that. The off-screen tiles’ “\_visible” property is set to false. Is this the wrong way to do it?

Yes visible or not the movieclips are still there and will take up the same ram,cpu usage no matter what the visibility is set to.

---

<div class="post-metadata">

### Author: ![Ph03nix](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@Ph03nix](https://forum.kirupa.com/u/Ph03nix)
#### Post date: [May 29, 2008, 2:38am UTC](https://forum.kirupa.com/t/tile-based-problem/261584/5 "2008-05-29T02:38:59Z")

</div>

> [@Gathan;2332777](#):
>
> Yes visible or not the movieclips are still there and will take up the same ram,cpu usage no matter what the visibility is set to.

You’re right. Can you explain the method you mentioned, tile scrolling? I’m not familiar with it.

---

<div class="post-metadata">

### Author: ![Gathan](https://avatars.discourse-cdn.com/v4/letter/g/df705f/32.png) [@Gathan](https://forum.kirupa.com/u/Gathan)
#### Post date: [May 29, 2008, 3:19am UTC](https://forum.kirupa.com/t/tile-based-problem/261584/6 "2008-05-29T03:19:46Z")

</div>

First you make a grid of movieclips on the screen, the amount is going to depend on your screen size and space them apart from each other with the width and height of the tiles so they don’t overlap.  
Then as you move to the right for example and it starts to scroll you see if the the top right or top left tiles for the grid is greater or less than a specific value depending on which one you use and if if it is you move the row of tiles that is to left that is going to be out of view at this point to the right most side of the tiles which is going to be the tiles that are going to come into view as you move and load the tiles into those movieclips for them.  
So basically you recycle all of the movieclips that you loaded to begin with, moving them around as needed and replacing the the contains of whats inside with the new tiles as you scroll.

---

<div class="post-metadata">

### Author: ![Ph03nix](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@Ph03nix](https://forum.kirupa.com/u/Ph03nix)
#### Post date: [May 29, 2008, 3:28am UTC](https://forum.kirupa.com/t/tile-based-problem/261584/7 "2008-05-29T03:28:08Z")

</div>

[quote=Gathan;2332792]First you make a grid of movieclips on the screen, the amount is going to depend on your screen size and space them apart from each other with the width and height of the tiles so they don’t overlap.  
Then as you move to the right for example and it starts to scroll you see if the the top right or top left tiles for the grid is greater or less than a specific value depending on which one you use and if if it is you move the row of tiles that is to left that is going to be out of view at this point to the right most side of the tiles which is going to be the tiles that are going to come into view as you move and load the tiles into those movieclips for them.  
So basically you recycle all of the movieclips that you loaded to begin with, moving them around as needed and replacing the the contains of whats inside with the new tiles as you scroll.[/quote]

I understand this vaguely, but how should I modify my current tile creation code?

code:

```
size=16;
num=0;
for (i=0; i&lt;size; i++) {
    for (j=0; j&lt;100; j++) {
        if (_root.map*[j] != 0) {
            if (_root.map*[j]&gt;0 && _root.map*[j]&lt;10) {
                _root.attachMovie("tile", "tile_"+num, DepthManager.kBottom+num);
                _root["tile_"+num]._x = j*size;
                _root["tile_"+num]._y = i*size;
                _root["tile_"+num].gotoAndStop(_root.map*[j]);
                _root["tile_"+num].stop();
                num++;
            }
        }
    }
}

```

\*note: \_root.map is the 2 dimensional array  
\*\*note: i\<size and j\<100 are temporary values (i’ll change them based on the # of rows and columns in my array)

---

<div class="post-metadata">

### Author: ![Gathan](https://avatars.discourse-cdn.com/v4/letter/g/df705f/32.png) [@Gathan](https://forum.kirupa.com/u/Gathan)
#### Post date: [May 29, 2008, 3:42am UTC](https://forum.kirupa.com/t/tile-based-problem/261584/8 "2008-05-29T03:42:27Z")

</div>

For the initial tile creation your not going to be using the two dimensional array or anything at all just create the empty tiles that are going to be used.  
Now for the loop its going to be roughly  
[LEFT][COLOR=#0000ff]for[/COLOR] [COLOR=#000000]([/COLOR][COLOR=#000000] **var** [/COLOR] x = [COLOR=#000080]0[/COLOR]; x\<Math.roundCOLOR=#000000+1[/COLOR]; x++[COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]  
[COLOR=#0000ff]for[/COLOR] [COLOR=#000000]([/COLOR][COLOR=#000000] **var** [/COLOR] y = [COLOR=#000080]0[/COLOR]; y\<Math.roundCOLOR=#000000[/COLOR]+1; y++[COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]  
[COLOR=#0000ff]attachMovie[/COLOR][COLOR=#000000]([/COLOR][COLOR=#ff0000]“tile”[/COLOR]+x+[COLOR=#ff0000]"_"[/COLOR]+y, DepthManager.[COLOR=#000080]kBottom[/COLOR]+num[COLOR=#000000])[/COLOR];  
[COLOR=#0000ff]this[/COLOR][COLOR=#000000][[/COLOR][COLOR=#ff0000]“tile”[/COLOR]+x+[COLOR=#ff0000]"_"[/COLOR]+y[COLOR=#000000]][/COLOR].[COLOR=#0000ff]_x[/COLOR] = x\*tilewidth;  
[COLOR=#0000ff]this[/COLOR][COLOR=#000000][[/COLOR][COLOR=#ff0000]“tile”[/COLOR]+x+[COLOR=#ff0000]"_"[/COLOR]+y[COLOR=#000000]][/COLOR].[COLOR=#0000ff]\_y[/COLOR] = y\*tileheight;  
[COLOR=#000000]}[/COLOR]  
[COLOR=#000000]}[/COLOR]  
[/LEFT]

---

<div class="post-metadata">

### Author: ![Ph03nix](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@Ph03nix](https://forum.kirupa.com/u/Ph03nix)
#### Post date: [May 29, 2008, 8:38pm UTC](https://forum.kirupa.com/t/tile-based-problem/261584/9 "2008-05-29T20:38:59Z")

</div>

[quote=Gathan;2332799]For the initial tile creation your not going to be using the two dimensional array or anything at all just create the empty tiles that are going to be used.  
Now for the loop its going to be roughly  
[LEFT][COLOR=#0000ff]for[/COLOR] [COLOR=#000000]([/COLOR][COLOR=#000000] **var** [/COLOR] x = [COLOR=#000080]0[/COLOR]; x\<Math.roundCOLOR=#000000+1[/COLOR]; x++[COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]  
[COLOR=#0000ff]for[/COLOR] [COLOR=#000000]([/COLOR][COLOR=#000000] **var** [/COLOR] y = [COLOR=#000080]0[/COLOR]; y\<Math.roundCOLOR=#000000[/COLOR]+1; y++[COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]  
[COLOR=#0000ff]attachMovie[/COLOR][COLOR=#000000]([/COLOR][COLOR=#ff0000]“tile”[/COLOR]+x+[COLOR=#ff0000]"_"[/COLOR]+y, DepthManager.[COLOR=#000080]kBottom[/COLOR]+num[COLOR=#000000])[/COLOR];  
[COLOR=#0000ff]this[/COLOR][COLOR=#000000][[/COLOR][COLOR=#ff0000]“tile”[/COLOR]+x+[COLOR=#ff0000]"_"[/COLOR]+y[COLOR=#000000]][/COLOR].[COLOR=#0000ff]_x[/COLOR] = x\*tilewidth;  
[COLOR=#0000ff]this[/COLOR][COLOR=#000000][[/COLOR][COLOR=#ff0000]“tile”[/COLOR]+x+[COLOR=#ff0000]"_"[/COLOR]+y[COLOR=#000000]][/COLOR].[COLOR=#0000ff]\_y[/COLOR] = y\*tileheight;  
[COLOR=#000000]}[/COLOR]  
[COLOR=#000000]}[/COLOR][/LEFT]  
[/quote]

I really hate to ask this, but I haven’t every done anything like this before, so how should change the frame of each tile and their positions when they get off screen?

\*note: I multiplied the \_root’s \_xscale and \_yscale by 2.

oh, and thank you so much for the help so far!

---

<div class="post-metadata">

### Author: ![Ph03nix](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@Ph03nix](https://forum.kirupa.com/u/Ph03nix)
#### Post date: [May 30, 2008, 12:40am UTC](https://forum.kirupa.com/t/tile-based-problem/261584/10 "2008-05-30T00:40:26Z")

</div>

[quote=Ph03nix;2333225]I really hate to ask this, but I haven’t every done anything like this before, so how should change the frame of each tile and their positions when they get off screen?

\*note: I multiplied the \_root’s \_xscale and \_yscale by 2.

oh, and thank you so much for the help so far![/quote]

ok never mind I worked it out myself, however, it LAGS! this code is included in an onClipEvent(enterFrame)… am I doing anything wrong?

\*note: \_root.\_x and Stage.width are divided by 2 because i initially mulitiply them by 2. and size is 16

for (i=0; i\<=((Stage.width/2)/size+1)\*((Stage.height/2)/size+1); i++) {  
if (_root["tile_"+i].\_x\<-\_root.\_x/2-size) {  
_root["tile_"+i].\_x += Stage.width/2+size;  
}  
if (_root["tile_"+i].\_x\>-\_root.\_x/2+(Stage.width/2)) {  
_root["tile_"+i].\_x -= Stage.width/2+size;  
}  
tileY = _root["tile_"+i].\_x/size;  
tileX = _root["tile_"+i].\_y/size;  
if (\_root.map[tileX][tileY] != 0) {  
_root["tile_"+i].gotoAndStop(\_root.map[tileX][tileY]+1);  
} else {  
_root["tile_"+i].gotoAndStop(1);  
}  
}

---

<div class="post-metadata">

### Author: ![Ph03nix](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@Ph03nix](https://forum.kirupa.com/u/Ph03nix)
#### Post date: [May 30, 2008, 1:46am UTC](https://forum.kirupa.com/t/tile-based-problem/261584/11 "2008-05-30T01:46:34Z")

</div>

sorry for the triple post, but I just wanted to say that I’ve worked out all the problems. The reason it lagged was that the “empty” tiles had a vector graphic (accidentally). Now it’s not lagging and I can make my levels as big as I want! :thumb: