Javascript Canvas Game - Наклонный космический корабль при движении

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

Вот ссылка предварительного просмотра. Он должен работать на рабочем столе или на мобильном устройстве: http://dylanmadigan.net/_digital-work/game-2/5-tilt/index.html

Я хочу, чтобы корабль слегка наклонился влево или вправо при движении. Лучше ли наклонять корабль с листа спрайта или фактически поворачивать графику в javascript?

В настоящее время я делаю это со списком спрайтов. Анимация корабля - это два кадра (чтобы вспыхивать вспышки бустера). У меня есть два кадра, посвященные каждому прямому, левому и правому, на одном листе спрайта. просмотрите лист спрайта с проигрывателем здесь. Это, похоже, приводит к мерцанию, когда спрайт перемещается влево и вправо. И время от времени он просто исчезает. Я не знаю, почему.

Лист спрайта предварительно загружен, и я думал, что это предотвратит мерцание. Это произошло, пока я не решил добавить еще 4 кадра для наклонного космического корабля.

Было бы лучше, если бы я использовал javascript для поворота графика вместо листа спрайтов? Я просто подумал, что лист спрайтов будет проще.

javascript,html5,canvas,

0

Ответов: 1


0

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

Вращение спрайта вокруг его центра

Чтобы сделать спрайт, который масштабируется и повернут вокруг его центра, и имеет альфа-затухание (потому что ...? Почему бы и нет)

function drawSprite(ctx,img,x,y,scale,rot,alpha){
    ctx.setTransform(scale,0,0,scale,x,y); // Position and scale
    ctx.rotate(rot); // rotate
    ctx.globalAlpha = alpha;  // set alpha
    ctx.drawImage(img,-img.width/2,-img.height/2); // draw sprite offset half its size
}

Когда закончите рисование спрайтов, вам нужно будет сбросить преобразование и альфа

ctx.setTransform(1,0,0,1,0,0); // sets default transform
ctx.globalAlpha = 1.0; // resets alpha

У вас может быть только один спрайт для корабля и сделать двигатели отдельным спрайтом (просто удалите корабль и сохраните тот же размер, чтобы облегчить позиционирование). Затем вы можете контролировать свечение двигателя независимо от корабля, используя альфу, чтобы затухать и выходить. Вы также можете установить ctx.globalCompositeOperation = "lighter"или "screen"получить лучшее свечение двигателя. Сбросьте режим comp "source-over"для нормального рендеринга.

Вы также должны изучить использование requestAnimationFrameи одиночный игровой цикл, а не использовать все setTimeouts.

JavaScript, html5, холст,