Проблема с HTML-холстом Рисунок

Я пытаюсь сделать этот рисунок в виде холста HTML5 и не могу понять, что вызывает это поведение.Проблема с HTML-холстом Рисунок

У меня он настроен так, что пиксельный «блок» 32 * 32 (теперь у меня есть только персонаж, но фоновые фрагменты и другие персонажи имеют одинаковый размер), поэтому окно должно быть делимым сеткой на 32.

У меня есть функция JS для смещения символа X и Y, но я, похоже, сохраняю смещение, хотя (я думаю) его не следует менять глобально, только локально.

Таким образом, я не могу сделать простую сетку 4x4. Вызов их в следующем порядке: 0,0; 0,1; 1,0; 1,1 должно показать сетку, как это:

xx 
xx

Вместо этого он делает это:

x 
xx 
    x

Вот страница JSFiddle: http://jsfiddle.net/pzwu38cq/

Вызовы, которые привлекают пиксели находятся в панели JS , в самом низу

Возможно, мне просто не хватает чего-то очень простого, но я ценю помощь в этом.

источник

2014-10-07 mitwilsch

Скотт Докси и treeno как правильно ответить, что ваш глюк с «+ =». Кстати, когда я прочитал ваш вопрос, я предположил, что вы хотите сделать альфа-смешение ваших воинов, но все ваши пиксели либо включены (альфа = 255), либо выключены (0). Так как это так ... почему бы не использовать 32x32 изображения вместо манипуляции с пикселями? – markE

@markE Я работаю из другой игры, в которой используются образы, я хотел переделать ее, используя этот метод рисования пикселов в виде холста (или рисунок в пикселях CSS, но я читал, что это было быстрее). Однако цель повторения этого заключается не в том, чтобы делать смешение, а в том, чтобы иметь карту с фоновыми плитами (у меня только есть символ в моем коде в настоящее время) – mitwilsch

Достаточно честный! Если скорость важна в вашем дизайне, вы можете проверить компоновку и, в частности, 'context.globalCompositeOperation = 'destination-over''. Этот режим компоновки позволяет сначала нарисовать ваших воинов, а затем нарисовать задний фон * под уже нарисованными воинами *. Если вы просто предлагаете это, потому что манипуляция с пикселями медленнее по сравнению с композицией. Удачи с вашим проектом!:-) – markE

Проблема заключается в том, что вы всегда меняется один и тот же массив,

pixels[i][0] += offsetX * 32; 
pixels[i][1] += offsetY * 32;

Try сделать глубокий-копию в drawPixels() следующим образом:

http://jsfiddle.net/pzwu38cq/11/

Я также поменял

drawPixels(warrior, 0,0); 
drawPixels(warrior, 0,1); 
drawPixels(warrior, 1,0); 
drawPixels(warrior, 1,1);

немного, потому что, где лишними Индексы, выглядит как C & P-вещь :-)

источник

2014-10-07 15:36:09 treeno

Спасибо, я сделал 1,1 на всех, потому что было легче увидеть проблему (чтобы она продолжала добавлять 32 к каждой новой). См. Вопрос о сетке, как вы изменили, и исходный результат. – mitwilsch

А, ок я этого не видел, но имеет смысл – treeno

Кстати: Если вы попали в проблему производительности из-за глубины, вы также можете попытаться передать смещения drawPixel (pixels, offsetX, offsetY). Тогда вам не нужно менять массив вообще. – treeno

Этот блок кода обновлял исходный массив (воин):

pixels[i][0] += offsetX * 32; 
pixels[i][1] += offsetY * 32;

переключая его с помощью временного массива будет достичь желаемых результатов.

drawPixel([ 
    pixels[i][0] + offsetX * 32, 
    pixels[i][1] + offsetY * 32, 
    pixels[i][2], 
    pixels[i][3], 
    pixels[i][4], 
    pixels[i][5] 
]);

Демо: http://jsfiddle.net/pzwu38cq/12/

источник

2014-10-07 15:35:43

Проблема с HTML-холстом Рисунок

ответ

Смежные вопросы