Алгоритм рисования спрайтов на бесконечной карте - PullRequest
Новая
       12

Алгоритм рисования спрайтов на бесконечной карте

2 голосов
/ 30 марта 2020

Я делаю игру на HTML5 холсте (это бесконечно), и я хочу сделать кусты в моей игре случайным образом из-за шума Перлина. Я хочу, чтобы фрагменты были сеткой плиток 16 на 16, а каждая плитка была на расстоянии 85 пикселей друг от друга. Я просто рисую сетку с помощью этого простого кода: 

ctx.lineWidth=4,ctx.strokeStyle="#000",ctx.globalAlpha=.06,ctx.beginPath();
for(var p=-5;p<canvas.width;p+=85){ctx.moveTo(p + (offset[0] % 85),0),ctx.lineTo(p + (offset[0] % 85),canvas.height)};
for(var m=-5;m<canvas.height;m+=85){ctx.moveTo(0,m + (offset[1] % 85)),ctx.lineTo(canvas.width,m + (offset[1] % 85))};
ctx.stroke();
ctx.globalAlpha=1;

вот текущий код, который у меня есть для кустов, но я не знаю, как заставить его работать на самом деле: 

for(x=offset[0];x<offset[0]+16;x++) {
        for(y=offset[1];y<offset[1]+16;y++) {
            if (noise.perlin2(x / 10, y/10) < -0.6) {
              ctx.drawImage(treeimage,  x, y)
            }
        }
    }

У меня есть доступ к текущему фрагменту игрока и смещению объектов на основе текущей позиции игрока (просто добавляя и вычитая из него, когда игрок нажимает клавишу со стрелкой).

РЕДАКТИРОВАТЬ: Извините, Я не объяснил это правильно. Изображения показывают, что я не могу понять, как заставить кусты иметь правильное положение на экране, когда игрок перемещается, и / или заставить 8 кусков вокруг игрока также загружаться, но показывают только, когда материал находится на экране. .

Просто пример:

Прежде, чем я немного сдвинусь: enter image description here

После того, как я перееду только немного: enter image description here

1 Ответ

0 голосов
/ 31 марта 2020

Прежде чем позвонить 

ctx.drawImage(treeimage,  x, y)

Вы должны убедиться, что изображение получено с сервера.

Один из способов сделать это - вставить небольшой тег IMG на страницу, а затем извлечь изображение из it 

<img id="treeimage" src="images/mapobjects/tree2.png" style="display:none;">

window.onload = function() { //use onload if you create drawing at page load 
var treeimage = document.getElementById("treeimage");
ctx.drawImage(treeimage, x, y);
}

Другой способ - создать тег IMG по коду и никогда не отображать его, а убедиться, что он имеет функцию загрузки. После его вызова теперь вы можете использовать свое изображение в любое время. 

window.treeimage = document.createElement('img'); //make it global or take care about scope
treeimage.src = "images/mapobjects/tree2.png";

treeimage.onload = function(){
  //only from now you can use that image
  ctx.drawImage(treeimage, x, y);
};
...