Animování herní menu a přechody obrazovek v HTML5: Příručka pro vývojáře, Flash

() translation by (you can also view the original English article)

HTML5 a Flash vývoj může mít mnoho společného, ale jako Flash developer jsem ještě našel to být monumentální úkol naučit znovu své staré dovednosti v HTML5. V tomto kurzu vám ukázat, jak jsem vytvořil animované menu a obrazovky přechodu pro HTML5 hra střílečka.

Konečný výsledek náhled

Podívejte se na výsledek, který budeme pracovat na:

Chcete-li vyzkoušet demo

Všimněte si, posouvání pozadí, lodě, které se objevují a otočit stranách každé položky menu a způsob, jakým obrazovka tmavne když vyberete některou možnost.

Úvod

HTML5 a JavaScript jsou podobné ActionScript v mnoha ohledech; tam je hodně překrývají v syntaxi, posluchače událostí a metody. Existují však některé velmi zřetelné rozdíly, které budu krýt v tomto kurzu:

Kreslení tvarů
Kreslení obrázků
Pomocí intervalů
Animace
Události myši
Přidání podpory pro více prohlížečů

Něco si uvědomit je, že tento kurz se používají především obrazy, které lze stáhnout s zdroj nebo mohou použít své vlastní obrazy, prosím (budete potřebovat vědět, šířky a výšky).

Krok 1: Nastavení

První věc, kterou musíme udělat, je přidat <canvas>prvek uvnitř těla soubor ve formátu HTML, takže vytvořit jeden volané ShootEmUp.html a vložte následující:</canvas>


<!DOCTYPE html>
<html>
  <head>
		<title>Shoot 'Em Up</title>
	</head>
	<body>
		<canvas id="myCanvas" width="480" height="320">
			<p>Your browser does not support HTML5!</p>
		</canvas>
	</body>

</html>

Zvýrazněné řádky vložit plátno prvek, který bude vykreslovat naši aktuální nabídku. Viz tento kurz pro Průvodce plátno od nuly.

Už je skoro čas začít kódování JavaScript! Máme dvě možnosti, kam může jít kód; Může být zapsán uvnitř HTML v rámci<script></script> Chcete-li udržet věci jednoduché budu psát kód níže <canvas>prvek.</canvas> Ale nebojte se použít externí soubor, pokud dáváte přednost; Jen nezapomeňte, opatřit si jej v.

1
2	<script type="text/javascript">
3	// Javascript Goes Here
4	</script>

Naším dalším krokem bude vytvoření čtyř proměnných k odkazování na element plátna snadno.


var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var width = canvas.getAttribute('width');
var height = canvas.getAttribute('height');

Nejprve jsme odkazuje proměnná myCanvas a nastavte ji na přejděte na canvas prvku HTML. Další proměnnou s názvem kontext byl vytvořen dimenzionalitu plátno (2D). Podobně jako Flash vytváříme poslední dvě proměnné, šířku a výšku, zjednodušit proces přístupu k vlastnosti Šířka a výška na plátno.

Krok 2: Načítání a kreslení obrázků

Stejně jako v jazyce ActionScript se chystáme vytvořit instance našich obrazů.


var bgImage = new Image();
var logoImage = new Image();
var playImage = new Image();
var instructImage = new Image();
var settingsImage = new Image();
var creditsImage = new Image();
var shipImage = new Image();

Nám chybí klíčový kus kódu pro každou instanci - cesta ke zdroji! Zachránil jsem všechny obrázky ve složce "Obrázky" v rámci stejného adresáře jako soubor HTML, takže:


shipImage.src = "Images/ship.png";	
bgImage.src = "Images/Background.png";
logoImage.src = "Images/logo.png";
playImage.src = "Images/play.png";
instructImage.src = "Images/instructions.png";
settingsImage.src = "Images/settings.png";
creditsImage.src = "Images/credits.png";

Než jsme kreslit obrazy na plátně Pojďme vytvořte čtyři pole pro uložení pozice a velikost tlačítek (playImage, instructImage, settingsImage, creditsImage). Tato pole bude později použít k vytvoření myši nad funkce.

1
2	var buttonX = [192,110,149,160];
3	var buttonY = [100,140,180,220];
4	var buttonWidth = [96,260,182,160];
5	var buttonHeight = [40,40,40,40];

Nyní můžeme nakreslit obrazy na plátně; To lze provést v rámci onload funkce pro každý obrázek, ale funkci onload není třeba být zahrnuty - můžeme jednoduše použít drawImage().


bgImage.onload = function(){
	context.drawImage(bgImage, 0, 0);
};
logoImage.onload = function(){
	context.drawImage(logoImage, 50, -10);
}
playImage.onload = function(){
	context.drawImage(playImage, buttonX[0], buttonY[0]);
}
instructImage.onload = function(){
	context.drawImage(instructImage, buttonX[1], buttonY[1]);
}
settingsImage.onload = function(){
	context.drawImage(settingsImage, buttonX[2], buttonY[2]);
}
creditsImage.onload = function(){
	context.drawImage(creditsImage, buttonX[3], buttonY[3]);
}

Pokud teď zkouší, měli byste vidět statický obrázek z menu, které budeme brzy vdechnout život. Loď není kresleno zbytek obrázků, protože budeme čerpat dále v události myši. Mimochodem Pokud jste neudělali to tak daleko, udržet vaše proměnné seskupeny v horní části a udělat to samé s funkcí.

Krok 3: Animace v rámci intervalu

JavaScript postrádá onEnterFrame() ekvivalent, ale můžeme snadno vytvářet vlastní pomocí interval (časovač).


var frames = 30;
var timerId = 0;

timerId = setInterval(update, 1000/frames);

Může být zmatený, jak funguje interval, tak jsem se vysvětlit ve stručnosti. Interval je volání funkce update() každých milisekund (1000/rámy) vytvořit plynulé obnovovací frekvenci. Hodnota snímků řídí fps; je-li rámce je 25, pak prohlížeč pokusí zavolat metodu update() každých (1000/25 =) 40 milisekund.

Naším dalším zřejmé krokem je vytvoření funkce update()


function update() {
	clear();
	move();
	draw();
}

Tři další funkce byly právě volal. Clear() se používá k uvolnění na plátno, protože na rozdíl od blesku plátno funguje jako dávat nálepky na desce; Obrázky nelze přesunout, poté, co byly umístěny. Další funkce, move(), se používá pro změnu hodnoty proměnných, které se používají s obrázky. Nakonec se nazývá draw() umístit tyto "nálepky".

1
2	funcion clear(){
3	context.clearRect(0, 0, width, height);
4	}

Jednoduše řečeno, tento kód vymaže vše uvnitř obdélníku, který je velikost plátna a čerpá z (0,0) levý horní roh. To znamená, že ji vymaže celý viditelný plátno.

Než vyrazíme na další funkce, je třeba zavést dvě proměnné. backgroundY bude proměnná y umístění pozadí obrázku a rychlost se použije k odečíst od backgroundY každého cyklu aktualizací.

1
2	var backgroundY = 0;
3	var speed = 1;

Efekt, který se chystáme vyrábět je nepřetržitě posouvání pozadí. Obraz se skládá ze dvou stejných starfield obrazů, nad sebou, v zvětšit obrázek (obrázek je dvakrát výška plátna). Budeme pomalu pohybovat obraz až do druhé poloviny je zcela v zobrazení a pak jsme se obnovit pozici obrazu zpět do první poloviny.


function move(){
	backgroundY -= speed;
	if(backgroundY == -1 * height){
		backgroundY = 0;
	}
}

Konečně máme funkce draw(). Všechny obrázky budou překresleny, ale jedna změna všimnout je, že hodnota y bgImage byl nahrazen backgroundY proměnné.


context.drawImage(bgImage, 0, backgroundY);
context.drawImage(logoImage, 50,-10);
context.drawImage(playImage, buttonX[0], buttonY[0]);
context.drawImage(instructImage, buttonX[1], buttonY[1]);
context.drawImage(settingsImage, buttonX[2], buttonY[2]);
context.drawImage(creditsImage, buttonX[3], buttonY[3]);

Test nyní a obdivovat hladké posouvání pozadí.

Krok 4: Kontrola pozice myši

Jedna věc HTML5 <canvas>chybí je podpora pro obrázek posluchače událostí, což znamená, nemůžeme jednoduše psát playImage.mouseover = function() {}.</canvas> Namísto toho musíme získat pozice myši vzhledem k plátno a zjistit, zda je nad objektem.


var mouseX;
var mouseY;

canvas.addEventListener("mousemove", checkPos);

Dvě proměnné, představil se chystáte použít k získání aktuálního umístění myši. Rádi přidali posluchače událostí v jazyce ActionScript, který volá funkci checkPos() při každém pohybu myši.


function checkPos(mouseEvent){
	mouseX = mouseEvent.pageX - this.offsetLeft;
	mouseY = mouseEvent.pageY - this.offsetTop;
}

Je-li upozorněn hodnoty mouseX a myšku, při každém přesunutí myši by si správnou pozici. Ale je tu jeden problém: moderní počítačové prohlížeče nepodporují tuto metodu. K překonání tohoto problému, můžeme můžete použít malý hack:


if(mouseEvent.pageX || mouseEvent.pageY == 0){
	mouseX = mouseEvent.pageX - this.offsetLeft;
	mouseY = mouseEvent.pageY - this.offsetTop;
}else if(mouseEvent.offsetX || mouseEvent.offsetY == 0){
	mouseX = mouseEvent.offsetX;
	mouseY = mouseEvent.offsetY;
}

To zkontroluje, zda prohlížeč používá k vrácení pozice myši "stránka" nebo "odsazení" vlastnosti a upraví hodnoty (podle potřeby) k získání pozice myši relativní plátna.

Pamatujte si tu loď jsme důkazem, ale nechtěl kreslit? Se chystáme vzít tento statický obraz, Roztočte jej a aby to vypadalo, pokaždé, když jsme myší na tlačítka!


var shipX = [0,0];
var shipY = [0,0];
var shipWidth = 35;
var shipHeight = 40;

var shipVisible = false;
var shipSize = shipWidth;
var shipRotate = 0;

První čtyři proměnné jsou stejné jako dříve (máme dvě pozice, protože nebude existovat dvě lodě). ShipVisible proměnná bude nastavena true, když je ukazatel myši nad tlačítko. Co se týče shipSize a shipRotate používají měřítko lodi svisle a přemístit ji dát iluzi, že se to točí. Mějte na paměti že měřítka obrazů zprava doleva.


for(i = 0; i < buttonX.length; i++){
	if(mouseX > buttonX[i] && mouseX < buttonX[i] + buttonWidth[i]){
		if(mouseY > buttonY[i] && mouseY < buttonY[i] + buttonHeight[i]){
			
		}
	}else{
		
	}
}

Přidejte kód ve funkci checkPos(). Nejprve jsme se cyklicky procházet tlačítka jsou (jsem přišel hodnotu pomocí buttonX.length). Dále můžeme porovnat mouseX zjistit, zda je větší než aktuální tlačítka buttonX a menší než jeho buttonX + buttonWidth - tedy v rámci horizontální hranice tlačítka. Jsme pak opakujte postup v jiného if prohlášení pro hodnoty Y. Pokud to je všechno pravda, pak musí být myši nad tlačítko, tak nastavte shipVisible na hodnotu true:

1
2	shipVisible = true;

A v rámci příkazu else prázdná je nastavena na false; pak to bude volána vždy, když si myší mimo tlačítko:

1
2	shipVisible = false;

Podle shipVisible = true budeme nastavit počáteční hodnoty pro shipX a shipY a provádět všechny měřítka v pohybu a kreslení funkce.


shipX[0] = buttonX[i] - (shipWidth/2) - 2;
shipY[0] = buttonY[i] + 2;
shipX[1] = buttonX[i] + buttonWidth[i] + (shipWidth/2); 
shipY[1] = buttonY[i] + 2;

Pro první shipX, kterou chceme nalevo od tlačítka, nastavíme hodnotu (aktuální tlačítka x - polovinu šířky lodi) a já to přešel 2 pixely doleva aby to vypadalo lépe. Podobný proces se opakuje pro první shipY. Pro druhou shipX můžeme umístit na (aktuální tlačítka X + šířku tohoto tlačítka + poloviční šířka lodi), a pak jsme Y jako předtím.

Teď přichází to nejtěžší. Máme loď a přesunout ji na kompenzaci měřítka. V rámci move() funkce napsat Pokud prohlášení.


if(shipSize == shipWidth){
	shipRotate = -1;
}
if(shipSize == 0){
	shipRotate = 1;
}
shipSize += shipRotate;

Kód začíná odečtením hodnoty shipSize, který bude použit k měřítko obrazu, když jsme se přiblížili Jakmile dosáhne nuly, které proces obrátí až je to opět plného rozsahu stupnice.

Teď můžeme přejít do funkce draw(). Pod všechny ostatní draw metody přidejte následující if prohlášení.


if(shipVisible == true){
	context.drawImage(shipImage, shipX[0] - (shipSize/2), shipY[0], shipSize, shipHeight);
	context.drawImage(shipImage, shipX[1] - (shipSize/2), shipY[1], shipSize, shipHeight);
}

Lodě jsou nakreslena normálně s výjimkou X pozice odměněny odečtením polovinu aktuálním měřítku.

Krok 5: Kontrola myši klepne

Přidat další posluchače události pro mouseup a vytvořit novou proměnnou pro druhý interval, který vytvoříme.

1
2	var fadeId = 0;
3	canvas.addEventListener("mouseup", checkClick);

Vytvořte funkci checkClick().


function checkClick(mouseEvent){
	for(i = 0; i < buttonX.length; i++){
		if(mouseX > buttonX[i] && mouseX < buttonX[i] + buttonWidth[i]){
			if(mouseY > buttonY[i] && mouseY < buttonY[i] + buttonHeight[i]){
				
			}
		}
	}
}

Jako předtím, zkontrolujeme, zda je správná pozice myši. Nyní musíme vytvořit nový interval a zastavit další interval a události posluchače.


fadeId = setInterval("fadeOut()", 1000/frames);
clearInterval(timerId);
canvas.removeEventListener("mousemove", checkPos);
canvas.removeEventListener("mouseup", checkClick);

Nic nového zde kromě toho, že musíme vytvořit funkci s názvem zanikat (). Musíme také vytvořit jiné proměnné nazývá čas.

1
2	var time = 0.0;


function fadeOut(){
	context.fillStyle = "rgba(0,0,0, 0.2)";
	context.fillRect (0, 0, width, height);
	time += 0.1;
	if(time >= 2){
		clearInterval(fadeId);
		time = 0;
		timerId = setInterval("update()", 1000/frames);
		canvas.addEventListener("mousemove", checkPos);
		canvas.addEventListener("mouseup", checkClick);
	}
}

To má některé nové metody, ale je to docela jednoduché. Od té doby jsme zastavili všechny posluchače událostí a interval ostatních naše nabídka je zcela statické. Tak jsme repeatively kreslení průhledný černý obdélník na vrcholu nabídky - bez zúčtování - dojem zvadl.

Variabilní doba se zvyšuje pokaždé, když je zavolána funkce, a jakmile dosáhne určité hodnoty (jakmile 20 "rámce" prošla, v tomto případě) jsme zrušte aktuální interval. Zde jsem reset menu, ale to je, kde byste nakreslit novou sekci v menu.

Jedna poslední věc k poznámce je, že při kreslení tvarů na plátně fillStyle je nastavena s hodnotu rgb (červená, zelená, modrá). Když chcete kreslit obrazce, průhledné, použijete rgba (červená, zelená, modrá, alfa).

Doufám, že to má mýtů zbavená trochu procesu učení pro přepnutí z jednoduché programování AS3 na plátno jednoduché programování. Post komentář, pokud máte jakékoliv dotazy!