Animacja - Js Opcje

[sonquer]

Witam, ostatnimi czasy zająłem się programowaniem gry w js/php/ajax.

A co do probelmu jak zaanimować taki obrazek :
http://pix.art.pl/files/artworks/Persiakout5.gif
do ruchu w prawo, lewo, górę, dół.. wiem że ma się to dziać w pętli.

Pokaże wam kawałek skryptu na ruch:


$(document).keydown(function (event) {
var code = (event.keyCode ? event.keyCode : event.which);
if(code == UP){
event.preventDefault();
y-=ile;
$("#"+nick+"").css("top", y+ "px");
}
......... i tak dalej.

[Crozin]

1. Obiekt Event z jQuery sam zajmuje się niekompatybilnościami przeglądarek (IE), więc nie musisz się już tym zajmować (patrz: var code = ...).
2. Wykonywanie logiki gry wewnątrz kodu odpowiedzialnego za przechwytywanie zdarzeń od użytkownika oraz brak odseparowania samej gry od jej prezentacji (DOM/CSS) to fatalny pomysł, który na dłuższą metę przyniesie Ci całą masę problemów. Zauważ, że już teraz prędkość poruszania się Twojej postaci jest uzależniona od... ustawień systemu operacyjnego, w którym możesz zmienić częstotliwość "wciskania" klawisza. Powinieneś: a) przy wciśnięciu klawisza jedynie ustawić sobie jakąś wewnętrzną flagę informującą o jego wciśnięciu cały ruch, zdarzenia (ogólnie fizykę gry) oprzeć o czas, nie zdarzenia (patrz punkt 3.).
3. Raczej powinieneś posiadać tzw. main-loop, czyli pętlę, która będzie wykonywać się bez końca, przy każdym swoim przejściu będzie liczyła z maksymalną dokładnością (milisekundy wystarczą) czas wykonywania się (FPS-y). JS jest językiem bez obsługi wielowątkowości (chyba, że skorzystasz z WebWorkers), ale przy pomocy setTimeout i odrobiny arytmetyki będziesz mógł bez problemu stworzyć taką pętlę o z góry określonej maksymalnej szybkości wykonywania się (60 FPS w pełni wystarczy).

Co do samej animacji, sprawa jest dosyć prosta.
1. Każda klatka powinna mieć możliwość bycia wyświetlaną przez inny okres czasu (np. klatka #1 przez 20 ms, klatka #2 przez 30 ms, klatka #3 przez 25 ms).
2. Jak rozumiem, każdy wiersz w tym obrazku to osobna animacja, natomiast kolumny w wierszu to poszczególne klatki.
3. Obrazki możesz wyświetlać jako tło elementu o rozmiarach pojedynczej klatki. Zmiana klatki będzie polegać wyłącznie na zmianie pozycji tła (CSS: background-position). Innymi słowy technika dokładnie ta sama co w przypadku CSS Sprites.
4. Dla każdej animacji tworzysz sobie osobny obiekt - powinien on otrzymać wymiary klatki, obrazek z animacją oraz czas wyświetlania poszczególnej klatki. Przy każdym przejściu pętli będziesz wykonywać metodę update(elapsedTime) na tym obiekcie. Argument tej metody to czas jaki upłynął od jej ostatniego wywołania (patrz punkt 3. z pierwszej listy). Metoda ta: a) doda wartość z argumentu do swojego wewętrzego licznika, sprawdzi czy czas zapisany w liczniku jest większy bądź równy czasowi wyświetlania aktualnej klatki; jeżeli nie zwróci niezmienione koordynaty dla animacji (dla właściwości background-position); jeżeli tak zwróci nowe koordynaty, a od licznika odejmie czas wyświetlania właśnie zmienionej klatki. Oczywiście przy dojściu do ostatniej klatki, trzeba będzie zacząć cały proces od nowa.

W przypadku gdybyś jednak zdecydował się na to by całą fizykę gry oprzeć o zdarzenia (zły pomysł) wystarczy, że dla każdej animacji utworzysz przy pomocy setInterval/setTimeout funkcję zwracającą pozycję następnej klatki.

[sonquer]

Dzięki za taką bombę info, ale ja nawet nie wiem jak zrobić tą pętle, mógł byś mi podać jakiś przykład ? Kawałek kodu ?
Byłbym bardzo wdzięczny.

[Crozin]

[JAVASCRIPT] pobierz, plaintext 
function Game() {
  this.isRunning;
  this.loopTime = new Date().getTime();
}
 
Game.prototype.start = function() {
  this.isRunning = true;
  this.gameLoop();
};
 
Game.prototype.stop = function() {
  this.isRunning = false;
};
 
Game.prototype.gameLoop = function() {
  if (!this.isRunning) {
    console.log("stop!");
    return;
  }
 
  var elapsedTime = (new Date().getTime() - this.loopTime) / 1000.0;
 
  console.log("game loop: " + elapsedTime);
 
  this.loopTime = new Date().getTime();
  window.setTimeout(this.gameLoop.bind(this), 1000 / 60);
};
 
 
 
var game = new Game();
game.start();
 
setTimeout(game.stop.bind(game), 3000);
[JAVASCRIPT] pobierz, plaintext 

Tutaj trzeba od razu poprawić jedną rzecz. W chwili obecnej po wykonaniu się pętli następuje przerwa 1/60 sekundy, a powinna być 1/60 - czasGenerowaniaKlatki sekundy - ale to już kwestia prostej matematyki. Wtedy też uzyskasz stałą liczbę klatek na sekundę (FPS = 60) co nieco ułatwi tworzenie gry.

PS. Nie powiedziałbym by JS był najlepszym wyborem na początek przygody z grami.

[sonquer]

więc w jakim języku zacząć ?

A przy okazji widzę że jesteś zorientowany w temacie Js i ogólnie porgramowania.
Jest możliwość stworzenia gry przeglądarkowej w C/C++? Jeżeli tak to jakie biblioteki wykorzystać ?

Ten post edytował sonquer 21.08.2012, 15:14:39

[Crozin]

IMHO na start bardzo dobrym wyborem będzie Java/C#. Szczególnie ciekawie wygląda sprawa z frameworkiem PlayN, który pozwala raz napisany kod w Javie wykorzystać w Javie, Androidzie (w sumie też Java), Flashu i JavaScripcie.
C/C++? Oczywiście że nadają się, ale mają sporo wad w porównaniu do platform działających w oparciu o maszynę wirtualną.

EDIT: C/C++ w przeglądarce? Nie ma takiej możliwości. Aplety Javy będą tutaj najbliższym odpowiednikiem.

Ten post edytował Crozin 21.08.2012, 15:39:16

[zegarek84]

co do częstotliwości fps wystarczy dla płynności 25fps, czyli co 40ms (chyba, że klatki z sobą totalnie nie są powiązane), ale po co walić od razu na górną granicę rozróżnialnych przez człowieka klatek??
do poczytania:
Szybkość klatek
Klatki na sekundę

[Crozin]

@zegarek84: 25 FPS to w większości przypadków zdecydowanie za mało. W filmach wystarczy, ponieważ poruszające się obiekty są rozmazane. W grze, każda klatka wyświetla idealnie ostry obraz, stąd liczba klatek musi być na poziomie minimum 30-40 FPS by uzyskać dobrą płynność ruchu.

EDIT: http://boallen.com/fps-compare.html - jestem pewien, że zauważysz różnicę pomiędzy 30, a 60 FPS-ami.

Ten post edytował Crozin 21.08.2012, 23:15:35

[zielu001]

EDIT: C/C++ w przeglądarce? Nie ma takiej możliwości. Aplety Javy będą tutaj najbliższym odpowiednikiem.

Przepraszam że się wtrące
Ale jest możliwość. Wystarczy napisać dodatkową wtyczkę do przeglądarki lub kożystać z gotowych rozwiązań, jest wiele frameworków np. Unity, Unreal

Wcześniej napisałeś
"C/C++? Oczywiście że nadają się, ale mają sporo wad w porównaniu do platform działających w oparciu o maszynę wirtualną."

Skąd masz takie informacje? Wady? Może podasz kilka, dużo lat w Cpp siedzę i nie spotkałem się z żadnymi takimi wadami oraz nikt też nie wspominał.


Przepraszam że poprawiam, ale nie cierpię jak ktoś kogoś wprowadza w błąd. A co do FPS nie będę się rozpisywał bo to już jest śmieszne Tak samo jak mówą że fps 60+ nic nie daje

[Crozin]

Przepraszam że się wtrące
Ale jest możliwość. Wystarczy napisać dodatkową wtyczkę do przeglądarki lub kożystać z gotowych rozwiązań, jest wiele frameworków np. Unity, Unreal

Powiedzmy, że w C++ da się zrobić wszystko, ale nie "normalną/typową" dla stron WWW drogą.

Skąd masz takie informacje? Wady? Może podasz kilka, dużo lat w Cpp siedzę i nie spotkałem się z żadnymi takimi wadami oraz nikt też nie wspominał.

Ot, pierwsze z brzegu: konieczność ręcznego zajmowania się pamięcią czy bardzo słaba przenośność pomiędzy platformami. Nie uniemożliwia to utworzenia oprogramowania ale potrafi naprzykrzać się.

[sonquer]

Będę bardzo wdzięczy jak ktoś zrobi mi z tego obrazka Animację.
Nawet częściową (ruch w górę albo w bok). Z tego obrazka co podałem w pierwszym poście.

[Crozin]

Dostałeś już wystarczająco dużo informacji - możesz przynajmniej spróbować sam. Zresztą nikt dokładnie nie wie, jak wygląda reszta Twojego kodu, więc jak niby miałby napisać to poprawnie.

[sonquer]

Pętla która wykonuje ruch w prawo...

[Crozin]

Pokaż co masz do tej pory... najlepiej na żywo, np. przy pomocy http://jsfiddle.net/

Ten post edytował Crozin 22.08.2012, 14:01:25

[sonquer]

x i y pobieranie jest z bazy danych.

to odpowiada za skręt postaci w danym kierunku :

setTimeout('$("div#"+nick+"").css({backgroundPosition : "0px 47px"})',10);
_______________________


var ile = 32;

var UP = 38;
var DOWN = 40;
var RIGHT = 37;
var LEFT = 39;

var ESC = 27;

$(document).keydown(function (event) {
var code = (event.keyCode ? event.keyCode : event.which);
if(code == UP){
event.preventDefault();
y-=ile;
setTimeout('$("div#"+nick+"").css({backgroundPosition : "0px 47px"})',10);
$("#"+nick+"").css("top", y+ "px");
}

if(code == DOWN){
event.preventDefault();
y+=ile;
setTimeout('$("div#"+nick+"").css({backgroundPosition : "0px 0px"})',10);
$("#"+nick+"").css("top", y+ "px");
}

if(code == RIGHT){
event.preventDefault();
x-=ile;
setTimeout('$("div#"+nick+"").css({backgroundPosition : "0px 141px"})',10);
$("#"+nick+"").css("left", x + "px");
}

if(code == LEFT){
event.preventDefault();
x+=ile;
setTimeout('$("div#"+nick+"").css({backgroundPosition : "0px 94px"})',10);
$("#"+nick+"").css("left", x + "px");
}

if(code == ESC){

alert("Kordy : x = " + x + ", y = " + y);

}
});