Вход

Просмотр полной версии : Цикличный запуск анимации

Retro_1477
08.10.2018, 14:53
У меня есть игра в которой главный персонаж имеет 3 состояния: бег вправо, бег влево и стояние.

Как это работает сейчас, при нажатие на клавишу A,D идёт постоянный вызов функции движения и при каждом этом вызове меняется кадр на другой(мне кажется это не правильный способ, т.к. нельзя контролировать скорость анимации). А так же сама анимация ожидания, лагает при беге, если её сделать через setInterval.

Как сделать правильное изменение кадров в зависимости от состояния? Ну или просто реализовать нормальную анимацию ожидания, когда персонаж не двигается.

вот код со всеми спрайтами:
https://yadi.sk/d/-DJ1GhtIoBIJLw

и просто код

<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
<div id="Game">
<div class="bg" width="800" height="600">
<canvas id="canvas" width="800" height="600"></canvas>
<img id="background"/>
<img id="cat">
</div>
</div>

</div>


<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script src="script.js" charset="utf-8"></script>
</body>




//Game
var canvas = document.getElementById('canvas'), context = canvas.getContext('2d');
var width = 800, height = 600;
canvas.width = width;
canvas.height = height;
var bg = document.getElementById('background');
var cat = document.getElementById('cat');
var a = 1;
var b = 1;
var c = 1;


stand();
// DRAW game

function moveRight(){
context.clearRect(0, 0, 800, 600);
context.drawImage(bg, 0, 0);
context.drawImage(cat, x, y, 100, 100);
cat.style.display = 'none';
bg.style.display = 'none';
bg.src = 'assets/images/bg/bg.jpg';
cat.src = 'assets/images/cat/run/right/Run ('+ a +').png';
if (a>=8) {
a=0;
}
a++;
};
function moveLeft(){
context.clearRect(0, 0, 800, 600);
context.drawImage(bg, 0, 0);
context.drawImage(cat, x, y, 100, 100);
cat.style.display = 'none';
bg.style.display = 'none';
bg.src = 'assets/images/bg/bg.jpg';
cat.src = 'assets/images/cat/run/left/Run ('+ b +').png';
if (b>=8) {
b=0;
}
b++;
};
function stand(){
cat.onload = function(){
context.clearRect(0, 0, 800, 600);
context.drawImage(bg, 0, 0);
context.drawImage(cat, x, y, 100, 100);
cat.style.display = 'none';
bg.style.display = 'none';
};
bg.src = 'assets/images/bg/bg.jpg';
cat.src = 'assets/images/cat/stand/Idle ('+ c +').png';
if (c>=10) {
c=0;
}
c++;
};

//MOVE CAT
var x = 0;
var y = 430;

function CheckPos(x) {
if(x <= 700 && x >= 0){
return true;
}
else return false;
}

window.onload = function () {
window.onkeydown = function(event){
/* move right */
if(event.keyCode == 68){
if(CheckPos(x+5)){
x+=5;
moveRight();
}
}
/* move left */
else if(event.keyCode == 65){
if(CheckPos(x-5)){
x-=5;
moveLeft();
}
}
};

window.onkeyup = function () {
if (event.keyCode != 68 && event.keyCode != 65) {
setInterval(stand, 200)
}

};
};
Retro_1477
09.10.2018, 08:38
Хорошая презентация, но если я интегрирую весь мой код под этот стандарт, то проблема останется. Нужно чтобы анимация стояния не работала пока идут обращения к клавишам A,D.
Retro_1477
09.10.2018, 08:43
88 строка*
Как нужно задать условие, чтобы он выполнял эту функцию когда не происходит никаких взаимодействий? Я понимаю что если я удерживаю клавишу, то он обращается к функции ходьбы многократно и в промежутках этих вызовов он впихивает в неё функцию стояния, из-за этого происходит такой баг.
Dilettante_Pro
09.10.2018, 11:08
У меня по рукой, правда, нет отдельных кадров движения...
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
<div id="Game">
<div class="bg" width="800" height="300">
<canvas id="canvas" width="800" height="300"></canvas>
<img id="background"/>
<img id="cat">
</div>
</div>

</div>

<script>
//Game
var canvas = document.getElementById('canvas'), context = canvas.getContext('2d');
var width = 800, height = 300;
canvas.width = width;
canvas.height = height;
var bg = document.getElementById('background');
var cat = document.getElementById('cat');
cat.style.display = 'none';
bg.style.display = 'none';
bg.src = 'https://javascript.ru/forum/images/ca_serenity/misc/logo.gif';

var a = 1;
var b = 1;
var c = 1;
var standLoop;
var oldKey;
stand();
// DRAW game

function moveRight(){
cat.src = 'https://javascript.ru/cat/list/donkey.gif';
context.clearRect(0, 0, 800, 600);
context.drawImage(bg, 0, 0);
context.drawImage(cat, x, y, 100, 100);
if (a>=8) {
a=0;
}
a++;
};
function moveLeft(){
cat.src = 'https://javascript.ru/cat/list/event.gif';
context.clearRect(0, 0, 800, 600);
context.drawImage(bg, 0, 0);
context.drawImage(cat, x, y, 100, 100);
if (b>=8) {
b=0;
}
b++;
};
function stand(){
cat.src = 'https://javascript.ru/cat/list/jquery_54.png';
cat.onload = function(){
context.clearRect(0, 0, 800, 300);
context.drawImage(bg, 0, 0);
context.drawImage(cat, x, y, 100, 100);
};
if (c>=10) {
c=0;
}
c++;
};

//MOVE CAT
var x = 0;
var y = 200;

function CheckPos(x) {
if(x <= 700 && x >= 0){
return true;
}
else return false;
}

window.onload = function () {
window.onkeydown = function(event){
clearInterval(standLoop);
/* move right */
if(event.keyCode == 68 || oldKey == 68 ){
if(CheckPos(x+5)){
oldKey = 68;
x+=5;
moveRight();
}
}
/* move left */
else if(event.keyCode == 65 || oldKey == 65){
if(CheckPos(x-5)){
oldKey = 65;
x-=5;
moveLeft();
}
}
};

window.onkeyup = function (event) {
if(event.keyCode == 65 || event.keyCode == 68) {
oldKey = 0;
standLoop = setInterval(stand, 200);
}
};
};
</script>
</body>
Retro_1477
09.10.2018, 12:53
Странно... в твоей демке я наблюдаю те же проблемы что и у меня (на мгновение анимация бега меняется на стояние). Но при добавление твоего кода в свой, всё хорошо работает. Спасибо!
Retro_1477
09.10.2018, 12:59
Хоте неее, я поторопился с выводами, всё так же, только теперь анимация мерцает и очень редкие появления анимации стояния.
Ладно, всё равно спасибо, сделаю просто, чтобы стоял без смены кадров)
Dilettante_Pro
09.10.2018, 13:08
в твоей демке я наблюдаю те же проблемы что и у меня (на мгновение анимация бега меняется на стояние)
Странно... В своей демке я не наблюдаю кадров стояния при нажатой A или D

ЗЫ: появляются, если нажимать/отпускать еще и другие клавиши.