Pular para o conteúdo

ct.tilemaps


ct.tilemaps

O objeto ct.tilemap permite fazer tilemaps no jogo. Ele também pode armazenar em cache os seus tilemaps, tornando o seu jogo notavelmente mais rápido, entretando, uma vez que os seus tilemaps estejam no chache, os mesmos não permitirão edição.

Métodos do ct.tilemaps

ct.tilemaps.create(depth)

Criar e retorna um novo tilemap. depth define a profundidade desse tilemap, o posicionando acima ou atrás de outros objetos.

Retorna uma nova instância criada de Tilemap.

ct.tilemaps.addTile(tilemap, textureName, x, y, frame)

Adiciona um tile no tilemap especificado.

ParâmetroTipoDescrição
tilemapTilemapO tilema no qual o tile será adicionado.
textureNamestringO nome de uma textura ct.js de renderização.
xnumberA coordenada do eixo horizontal na qual o tile deve ser adicionado.
ynumberA coordenada do eixo vertical na qual o tile deve ser adicionado.
framenumber(opcional) Deternmina qual o frame deve ser renderizado. O padrão é 0.

Retorna o tile criado, o qual é um PIXI.Spriteopen in new window.

ct.tilemaps.cache(tilemap, chunkSize)

Armazena um tilemap em cache, agrupando os tiles em grandes pedaços e transformando os mesmos em vários bitmaps. Uma vez que esteja no cache, não pode mais ser modificado.

ParâmetroTipoDescrição
tilemapTilemapO tilemap a ser armazenado no cache.
chunkSizenumber(opcional) O tamanho mínimo de um pedaço. O padrão é 1024.

ct.tilemaps.cacheDiamond(tilemap, chunkSize)

Habilita o cache nesse tileset, congelando e transformando o mesmo em uma série de texturas bitmaps. Isso proporciona uma grande aumento de velocidade, mas impede que seja feita edição adicional.

Essa versão empacota os tiles na forma de losango e organiza os mesmos de cima para baixo. Isso corrige o problema de junção entre os tiles para jogos isométricos.

Note que os tiles devem ser colocados em uma superfície plana para uma ordenação apropriada. Se você precisa de um efeito de elevação, considere descolcar cada tile com a propriedade tile.pivot.y.

Isso é o mesmo que chamar tilemap.cacheDiamond();

ParâmetroTipoDescrição
tilemapTilemapO tilemap a ser armazenado no cache.
chunkSizenumber(opcional) O tamanho mínimo de cada pedaço. O padrão é 1024.

Métodos do Tilemap

Tilemap é uma subclasse de PIXI.Containeropen in new window, e ela pode ser colorida ou pintada, transfromada e movida. Os métodos abaixo repetem os métodos de ct.tilemaps, mas eles estão em um estilo orientado a objetos.

tilemap.addTile(textureName, x, y, frame)

Coloca um tile no tilemap atual.

ParâmetroTipoDescrição
textureNamestringO nome de uma textura ct.js para ser renderizada.
xnumberA coordenada do eixo horizontal na qual o tile deve ser adcionado.
ynumberA coordenada do eixo vertical na qual o tile deve ser adcionado.
framenumber(opcional) Determina qual o frame deve ser renderizado. O padrão é 0.

tilemap.cache(chunkSize)

Armazena o tilemap no cache, agrupando os tiles em pedaços grandes e transformandos os mesmos em vários bitmaps. Uma vez armazenado no cache, o mesmo não pode ser mais modificado.

ParâmetroTipoDescrição
chunkSizenumber(opcional) O tamanho mínimo de um pedaço. O padrão é 1024.

tilemap.cacheDiamond(chunkSize)

Armazena o tilemap no cache, agrupando os tiles em grandes pedaços e transformando os mesmos em vários bitmaps. Uma vez armazenado no cache, o mesmo não pode ser mais modificado.

Essa versão empacota os tiles na forma de losango e organiza os mesmos de cima para baixo. Isso corrige o problema de junção entre os tiles para jogos isométricos.

Note que os tiles devem ser colocados em uma superfície plana para uma ordenação apropriada. Se você precisa de um efeito de elevação, considere descolcar cada tile com a propriedade tile.pivot.y.

ParâmetroTipoDescrição
chunkSizenumber(opcional) O tamanho mínimo de um pedaço. O padrão é 1024.

Exemplo: Cria uma linha de tiles com diferentes frames de textura

this.tilemap = ct.tilemaps.create(-100);
for (let i = 0; i < 10; i++) {
    ct.tilemaps.addTile(this.tilemap, 'Tiles', i*64, 0, i);
}
this.tilemap.cache();

Exemplo: Gera uma mapa feito de bloco e Perlin noise e habilita a colisão

Você vai precisar ativar o módulo ct.noise em seu projeto, além do módulo ct.place que já vem ativo por padrão, e de uma textura chamada de RockTile.

const tilemap = ct.tilemaps.create(-100);
ct.noise.setSeed(); // Vamos randomizar o seed a cada início

// Vamos assumir que você tem uma textura chamada 'RockTile' de dimensões de 64x64px.
for (var x = 0; x < ct.camera.width / 64; x++) {
    for (var y = 0; y < ct.camera.height / 64; y++) {
        var value = ct.noise.simplex2d(x / 7, y / 7); // Retorna um valor de -1 até 1.
        if (value > 0) {
            const tile = tilemap.addTile('RockTile', x*64, y*64);
            // Os tiles são PIXI.Sprites; nós podemos ajustar a sua cor e transparência antes de ser armazenado no cache
            tile.alpha = value * 0.5 + 0.5;
        }
    }
}

tilemap.cache();
ct.place.enableTilemapCollisions(tilemap, 'Solid');