Slow on my code TileMap etc

#1

Anybody knows why this code get more and more slow when i add more tiles, now is 800x480, tiles 32x32 give 25 tiles width and 15 tiles height…

Main.hx:

package;

import openfl.display.Sprite;
import openfl.events.Event;
import openfl.events.KeyboardEvent;
import openfl.geom.Point;
import openfl.Lib;
import openfl.text.TextField;
import openfl.text.TextFormat;

/**
 * ...
 * @author 
 */
class Main extends Sprite 
{
    private var map:Array<Array<Int>>;
    private var world:Sprite;
    private var tileSize:Int;
    private var player:AllTiles;
    private var acceleration:Float;
    private var velocity:Point;
    private var keys:Array<Bool>;
    private var isOnGround:Bool;

    public function new() 
    {
        super();
        
        tileSize = 32;
        acceleration = 0.9;
        
        map = [
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1,1]
        ];
        
        world = new Sprite();
        
        for (row in 0...map.length) 
        {
            for (cell in 0...map[row].length) 
            {
                if (map[row][cell] == 1)
                {
                    //Math.floor(Math.random() * (max-min+1) + min)
                    var tile:AllTiles = new AllTiles(Math.floor(Math.random() * (4-1+1) + 1));
                    tile.x = cell * tileSize;
                    tile.y = row * tileSize;
                    world.addChild(tile);
                }
            }
        }
        addChild(world);
        
        player = new AllTiles(5);
        addChild(player);
        player.x = 300 - tileSize / 2;
        player.y = 200 - tileSize / 2;
        velocity = new Point(0, 0);
        isOnGround = false;
        
        this.addEventListener(Event.ENTER_FRAME, gameLoop);
        
        keys = [];
        stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
        stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
        
        var instructions:TextField = new TextField();
        instructions.selectable = false;
        instructions.text = "SPACE to jump, ARROW KEYS to move";
        instructions.textColor = 0xffffff;
        instructions.defaultTextFormat = new TextFormat("_sans", 12);
        instructions.x = 15;
        instructions.y = 370;
        instructions.width = 300;
        addChild(instructions);
    }
    
    private function onKeyDown(evt:KeyboardEvent):Void 
    {
        keys[evt.keyCode] = true;    
    }

    private function onKeyUp(evt:KeyboardEvent):Void 
    {
        keys[evt.keyCode] = false;
    }
    
    private function gameLoop(e:Event):Void 
    {
        // Gravity
        velocity.y += acceleration;
        
        // Movement
        if (isOnGround && keys[32]) 
        {
            isOnGround = false;
            velocity.y = -16;
        }
        if (keys[39]) 
        {
            velocity.x = 7;
        }
        else if (keys[37]) 
        {
            velocity.x = -7;
        }
        else 
        {
            velocity.x = 0;
        }
        // Player coordinates on the grid
        var tileCoords:Point = new Point(0, 0);
        var approximateCoords:Point = new Point();
        
        player.y += velocity.y;
        checkBottomCollision(tileCoords, approximateCoords);
        checkTopCollision(tileCoords, approximateCoords);
        
        player.x += velocity.x;
        checkRightCollision(tileCoords, approximateCoords);
        checkLeftCollision(tileCoords, approximateCoords);
        
        // Final vertical velocity check
        if (velocity.y != 0) 
        {
            isOnGround = false;
        }
    }
    
    private function checkBottomCollision(tileCoords:Point, approximateCoords:Point):Void 
    {
        // Bottom collision
        if (velocity.y >= 0) 
        {
            approximateCoords.x = player.x / tileSize;
            approximateCoords.y = player.y / tileSize;
            tileCoords.y = Math.ceil(approximateCoords.y);
            
            tileCoords.x = Math.floor(approximateCoords.x);
            if (isBlock(tileCoords)) 
            {
                player.y = (tileCoords.y - 1) * tileSize;
                velocity.y = 0;
                isOnGround = true;
            }
            
            tileCoords.x = Math.ceil(approximateCoords.x);
            if (isBlock(tileCoords)) 
            {
                player.y = (tileCoords.y - 1) * tileSize;
                velocity.y = 0;
                isOnGround = true;
            }
        }
    }
    
    private function checkTopCollision(tileCoords:Point, approximateCoords:Point):Void 
    {
         // Top collision
         if (velocity.y < 0) 
         {
             approximateCoords.x = player.x / tileSize;
             approximateCoords.y = player.y / tileSize;
             
             tileCoords.y = Math.floor(approximateCoords.y);
             
             tileCoords.x = Math.floor(approximateCoords.x);
             if (isBlock(tileCoords)) 
             {
                 player.y = (tileCoords.y + 1) * tileSize;
                 velocity.y = 0;
             }
             
             tileCoords.x = Math.ceil(approximateCoords.x);
             if (isBlock(tileCoords)) 
             {
                 player.y = (tileCoords.y + 1) * tileSize;
                 velocity.y = 0;
             }
         }
     }
     
     private function checkRightCollision(tileCoords:Point, approximateCoords:Point):Void 
     {
         // Right collision
         if (velocity.x > 0)
         {
             approximateCoords.x = player.x / tileSize;
             approximateCoords.y = player.y / tileSize;
             
             tileCoords.x = Math.ceil(approximateCoords.x);
             
             tileCoords.y = Math.floor(approximateCoords.y);
             if (isBlock(tileCoords)) 
             {
                 player.x = (tileCoords.x - 1) * tileSize;
                 velocity.x = 0;
             }
             
             tileCoords.y = Math.ceil(approximateCoords.y);
             if (isBlock(tileCoords)) 
             {
                 player.x = (tileCoords.x - 1) * tileSize;
                 velocity.x = 0;
             }
         }
     }
     
     private function checkLeftCollision(tileCoords:Point, approximateCoords:Point):Void 
     {
         // Left collision
         if (velocity.x <= 0)
         {
             approximateCoords.x = player.x / tileSize;
             approximateCoords.y = player.y / tileSize;
             
             tileCoords.x = Math.floor(approximateCoords.x);
             
             tileCoords.y = Math.floor(approximateCoords.y);
             if (isBlock(tileCoords)) 
             {
                 player.x = (tileCoords.x + 1) * tileSize;
                 velocity.x = 0;
             }
             
             tileCoords.y = Math.ceil(approximateCoords.y);
             if (isBlock(tileCoords)) 
             {
                 player.x = (tileCoords.x + 1) * tileSize;
                 velocity.x = 0;
             }
         }
     }
    
    private function isBlock(coords:Point):Bool 
    {
        return map[Math.round(coords.y)][Math.round(coords.x)] == 1;
    }

}

AllTiles.hx:

package;
import openfl.Assets;
import openfl.display.Sprite;
import openfl.display.Tile;
import openfl.display.Tilemap;
import openfl.display.Tileset;
import openfl.geom.Rectangle;

/**
 * ...
 * @author VicenFlts
 */
class AllTiles extends Sprite
{
    private var tilemap:Tilemap;
    private var tileset:Tileset;

    private var block1:Int;
    private var block2:Int;
    private var block3:Int;
    private var block4:Int;
    private var player:Int;
    private var potion:Int;

    public function new(id:Int) 
    {
        super();
        
        tileset = new Tileset(Assets.getBitmapData("img/fantasy-tileset.png"));
        block1 = tileset.addRect(new Rectangle(0, 32, 32, 32));
        block2 = tileset.addRect(new Rectangle(32, 32, 32, 32));
        block3 = tileset.addRect(new Rectangle(64, 32, 32, 32));
        block4 = tileset.addRect(new Rectangle(96, 32, 32, 32));
        player = tileset.addRect(new Rectangle(96, 32*18, 32, 32));
        potion = tileset.addRect(new Rectangle(64, 32*5, 32, 32));
        
        tilemap = new Tilemap(600, 400, tileset);
        addChild(tilemap);
        
        switch(id)
        {
            case 1:
                var tile:Tile = new Tile(block1);
                tilemap.addTile(tile);
            case 2:
                var tile:Tile = new Tile(block2);
                tilemap.addTile(tile);
            case 3:
                var tile:Tile = new Tile(block3);
                tilemap.addTile(tile);
            case 4:
                var tile:Tile = new Tile(block4);
                tilemap.addTile(tile);
            case 5:
                var tile:Tile = new Tile(player);
                tilemap.addTile(tile);
            case 6:
                var tile:Tile = new Tile(potion);
                tilemap.addTile(tile);
            default:
        }
            
    }
    
}
#2

here the tiles:

fantasy-tileset.png256×832 29.2 KB

#3

You’re creating a new AllTiles object for every point on the map. Shouldn’t you create only one of those?

class AllTiles extends Sprite
{
    private var tilemap:Tilemap;
    private var tileset:Tileset;
    
    public function new()
    {
        super();
        
        tileset = new Tileset(Assets.getBitmapData("img/fantasy-tileset.png"));
        tileset.addRect(new Rectangle(0, 32, 32, 32));
        tileset.addRect(new Rectangle(32, 32, 32, 32));
        tileset.addRect(new Rectangle(64, 32, 32, 32));
        tileset.addRect(new Rectangle(96, 32, 32, 32));
        tileset.addRect(new Rectangle(96, 32*18, 32, 32));
        tileset.addRect(new Rectangle(64, 32*5, 32, 32));
        
        tilemap = new Tilemap(600, 400, tileset);
        addChild(tilemap);
        
    }
    
    public function addTile(id:Int):Tile
    {
        
        var tile:Tile = new Tile(id);
        tilemap.addTile(tile);
        return tile;
        
    }
    
}

class Main extends Sprite 
{
    private var map:Array<Array<Int>>;
    private var world:AllTiles;
    private var tileSize:Int;
    private var player:Tile;
    private var acceleration:Float;
    private var velocity:Point;
    private var keys:Array<Bool>;
    private var isOnGround:Bool;

    public function new() 
    {
        super();
        tileSize = 32;
        acceleration = 0.9;
        
        map = [
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1,1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1,1]
        ];
        
        world = new AllTiles();
        
        for (row in 0...map.length) 
        {
            for (cell in 0...map[row].length) 
            {
                if (map[row][cell] == 1)
                {
                    //Math.floor(Math.random() * (max-min+1) + min)
                    var tile:Tile = world.addTile(Math.floor(Math.random() * (4-1+1) + 1));
                    tile.x = cell * tileSize;
                    tile.y = row * tileSize;
                }
            }
        }
        addChild(world);
        
        player = world.addTile(5);
        player.x = 300 - tileSize / 2;
        player.y = 200 - tileSize / 2;
        velocity = new Point(0, 0);
        isOnGround = false;
        
        //...
#4

if i have to create only once that them how i put the Tile type class in a sprite? to call the collision function based on sprite

#5

The point of using Tilemap is to minimize the number of sprites. If you make sprites for everything, you lose the benefits.

Fortunately, you don’t need a Sprite object to do collision detection. Tile objects have x and y coordinates, and you already know their dimensions (32x32). This is enough information to check whether they’re touching.

#6

Thanks! player_03 :sweat_smile: