Herné menu a obrazovky prechody v HTML5: sprievodca pre Flash vývojári

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

HTML5 a Flash vývoj môže mať veľa spoločného, ale ako Flash developer som ešte našiel to byť monumentálne úlohu znovu naučiť moja stará zručnosti v HTML5. V tomto tutoriále, ukážem vám, ako som vytvoril animované menu a obrazovkou prechod pre HTML5 videohra.

Konečný výsledok Preview

Pozrite sa na výsledok, budeme pracovať na:

Kliknite na položku vyskúšať demo

Poznámka: posúvanie pozadia, lode, ktoré sa objavujú a otočiť oboch stranách každej položky ponuky a spôsob obrazovka tmavne do čierna, keď vyberiete voľbu.

Úvod

HTML5 a JavaScript sú podobné ActionScript mnohými spôsobmi; tam je veľa prekrývanie syntax, udalosti poslucháčov a metódy. Avšak existujú niektoré veľmi výrazné rozdiely, ktoré budu kryť v tomto tutoriále:

Kreslenie tvarov
Kreslenie obrázkov
Pomocou intervalov
Oživovanie
Udalosti myši
Pridanie podpory pre niekoľko prehľadávačov

Niečo na vedomie je, že tento návod hlavne používa obrázky, ktoré možno stiahnuť so zdrojom, alebo môžete použiť vlastné obrázky, ak by ste mi prosím (budete potrebovať vedieť, výšky a šírky).

Krok 1: Nastavenie

Prvá vec, ktorú musíme urobiť, je pridať <canvas>prvkom v tele HTML súboru, takže vytvoriť jeden volal ShootEmUp.html a vložte nasledovné:</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ýraznené riadky vložiť prvok canvas, ktoré bude poskytovať naše aktuálne ponuky. Pozri toto tutoriál pre sprievodcu na plátne od nuly.

Je už takmer čas začať kódovanie JavaScript! Máme dve možnosti, kde môžete ísť kód; Môžu byť písané v HTML v rámci<script></script> Držať veci jednoduché bude písať nižšie uvedený kód <canvas>element.</canvas> Ale bez obáv používať externý súbor, ak dávate prednosť; len nezabudnite zdroj v.

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

Náš ďalší krok bude vytvoriť štyri premenné odkaz prvok canvas ľahko.


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

Najprv sme uvádzaný premennú myCanvas a nastavte ju na ukážte na plátne prvku HTML. Inej premennej s názvom kontext bol vytvorený dostať plátno dimenzionalita (2D). Podobné Flash vytvárame konečnú dve premenné, šírku a výšku, zjednodušiť proces prístupu k vlastnosti Šírka a výška plátna.

Krok 2: Nakladanie a kreslenie obrázkov

Rovnako ako v ActionScript budeme vytvárať inštancie naše obrázky.


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();

Rozhodujúce kus kódu pre každú inštanciu - Zdrojová cesta nám chýba! Zachránil som všetky obrázky v priečinku "Obrázky" v rovnakom adresári ako súbor 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";

Pred čerpáme obrazy na plátno poďme vytvoriť štyri polia držať pozície a veľkosti tlačidiel (playImage, instructImage, settingsImage, creditsImage). Tieto polia sa použije neskôr vytvoriť myš nad funkcie.

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];

Teraz môžeme čerpať obrazy na plátno; to možno vykonať v rámci onload funkcie pre každý obrázok, ale funkciou onload nemusí byť zahrnuté - môžeme jednoducho použiť 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]);
}

Ak sa skúša teraz, mali by ste vidieť statický obrázok z menu, ktoré budeme čoskoro vdýchnu život. Loď nebola položená do zvyšku obrázky pretože budeme čerpať neskôr v myši udalosť. Mimochodom, ak ste prístav robil to tak ďaleko, udržať vaše premenné zoskupené v hornej časti a urobiť to isté s funkciami.

Krok 3: Animácie pomocou intervalov

JavaScript chýba onEnterFrame() rovnocenné, ale môžeme ľahko vytvárať vlastné pomocou interval (časovač).


var frames = 30;
var timerId = 0;

timerId = setInterval(update, 1000/frames);

Môžu byť zmätení, ako interval pracuje takže stručne vysvetlím. Interval je volaním procedúry update() funkcia každý milisekúnd (1000/rámy) vytvoriť hladké obnovovania. Hodnota snímok ovláda fps; Ak rámy 25, potom prehliadač pokúsi sa volať každý (1000/25 =) 40 milisekúnd.

Náš ďalší zjavné krokom je vytvoriť procedúru update() funkcia


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

Tri ďalšie funkcie boli len tzv. Clear() sa používa na jasné plátno, pretože na rozdiel od flash plátno funguje ako dávať nálepky na palube; obrázky nie je možné premiestniť, po boli umiestnené. Ďalšie funkcie, move(), sa používa na zmenu hodnoty premenných, ktoré sa používajú s obrázkami. Konečne draw() sa nazýva umiestniť tieto "nálepky".

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

Zjednodušene povedané, tento kód vymaže všetko vo vnútri obdĺžnika, ktorý je veľkosť plátna a je čerpaná z (0,0), v ľavom hornom rohu. To znamená, že to vymaže celý viditeľný plátno.

Predtým, ako sme sa presunúť na ďalšiu funkciu, je potrebné zaviesť dve premenné. Pozadím bude premenná pre obrázok na pozadí y-pozície a rýchlosti budú použité na odpočítať od pozadím každý cyklus aktualizácie.

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

O tom, že budeme vyrábať je neustále posúvaný na pozadí. Obraz sa skladá z dvoch identických starfield obrázky, nad sebou, vo väčší obrázok (obrázok je dvojnásobok výšky plátna). Budeme pomaly pohybovať obrázok až do druhej polovice je úplne v zobrazení a potom sme reset polohy obrazu späť na prvý polrok.


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

Konečne máme funkciu draw(). Všetky obrázky budú prekresľovať, ale jedna zmena všímať je, že hodnota y bgImage bol nahradený s pozadím premennej.


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 teraz a obdivovať plynulé posúvanie pozadia.

Krok 4: Kontrola polohy myši

Jedna vec HTML5 <canvas>chýba podpora pre image je udalosť poslucháčov, čo znamená jednoducho nemôžeme písať playImage.mouseover = function() {}.</canvas> Namiesto toho sme si pozíciu myši vzhľadom na kresliace plátno a zistiť, či je nad objektom.


var mouseX;
var mouseY;

canvas.addEventListener("mousemove", checkPos);

Dve veličiny zaviedla sa chystáte byť použité na získanie aktuálnej polohy myši. Sme pridali udalosť poslucháči, ako v ActionScript, ktorá volá funkciu checkPos() zakaždým, keď myši pohybuje.


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

Ak ste upozornení hodnoty mouseX a hnedý, zakaždým, keď ste presunuli myšou by ste si v správnej polohe. Ale je tu jeden problém: nie všetky moderné desktopové prehliadače podporujú túto metódu. Na prekonanie tohto problému môžeme použiť trochu hack namiesto:


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 skontroluje, či prehľadávač používa "strana" alebo "vyrovnanie" vlastnosti vrátiť pozície myši a upravuje hodnoty (ak je to potrebné) získať pozície myši vzhľadom na kresliace plátno.

Pamätajte si túto loď sme osvedčil súhlasu, ale nechcel kresliť? Budeme brať že statický obraz, točiť a nech sa objaví vždy, keď sme myši nad tlačidlá!


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

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

Prvé štyri premenné sú rovnaké ako predtým (máme dve pozície, pretože bude existovať dve lode). Premenná shipVisible sa nastaví pravda Ak je kurzor nad tlačidlom. Pokiaľ ide o shipSize a shipRotate, sa použijú mierke lode vertikálne a premiestniť ho dať ilúziu, že je spinning. Majte na pamäti, že obrazy stupnice sprava doľava.


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{
		
	}
}

Pridajte kód v checkPos() funkcia. Najprv sme postupne prepínať tlačidlá sú (som vymyslel hodnotu pomocou buttonX.length). Ďalej môžeme porovnať mouseX či je väčšia ako tlačidlo aktuálneho buttonX a menej ako jeho buttonX + buttonWidth - t. j. horizontálne medziach tlačidla. Potom opakujeme proces v inom ak vyhlásenie hodnoty Y. Ak je všetko pravda, potom musí byť myši nad tlačidlo, tak nastaviť shipVisible na hodnotu true:

1
2	shipVisible = true;

A do prázdnej iný vyhlásenie nastavená na hodnotu false; to potom volal kedykoľvek môžete myšou z tlačidla:

1
2	shipVisible = false;

Pod shipVisible = true budeme nastaviť počiatočné hodnoty pre shipX a shipY, a vykonávať všetky mierky v pohybe a kresliť funkcie.


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;

Prvý shipX, ktorý chceme len vľavo od tlačidla, musíme nastaviť hodnotu (aktuálne tlačidlo x - polovica šírky lode) a pohyboval to viac ako 2 pixelov doľava a aby to vyzeralo lepšie. Podobný proces sa opakuje pre prvú shipY. Na druhom shipX sme pozície (aktuálne tlačidlo X + Šírka tohto tlačidla + polovica šírky lode), a potom sme sa Y ako predtým.

Teraz prichádza zložitejšia časť. Máme mierke lode a presuňte ho nad kompenzovať škálovanie. V rámci move() funkcia napísať ak vyhlásenie.


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

Kód začína odpočítaním hodnoty shipSize, ktoré budú použité na úpravu obrazu, keď budeme čerpať akonáhle dosiahne nulu, proces obráti až je to naplno znova.

Teraz môžeme prejsť do draw() funkcia. Pod všetky ostatné metódy kresliť pridať nasledujúce ak vyhlásenie.


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);
}

Lode sa pripravujú normálne s výnimkou X pozícií odškodňuje odčítaním polovica aktuálnej mierke.

Krok 5: Kontrola myši klikne

Pridať inú udalosť prijímač pre mouseup a vytvoriť novú premennú pre druhý interval vytvoríme.

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

Vytvoriť funkciu 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]){
				
			}
		}
	}
}

Ako predtým, skontrolujeme, či je správne pozície myši. Teraz musíme vytvoriť nový interval a zastaviť interval a udalosť poslucháči.


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

Nič nové tu okrem musíme vytvoriť funkciu nazýva fadeOut(). Musíme tiež vytvoriť inej premennej nazýva č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á niektoré nové metódy, ale je to celkom jednoduché. Pretože sme zastavili všetky udalosti poslucháčov a interval náš jedálny lístok je úplne statické. Tak sme repeatively kreslenie priehľadné čierny obdĺžnik na hornej menu - bez clearing to - dať ilúziu vyblednutiu von.

Variabilná doba sa zvýši zakaždým, keď je funkcia je nazýva, a akonáhle dosiahne určitú hodnotu (po 20 "frames", v tomto prípade prešli) môžeme vymazať aktuálny interval. Tu som reset menu, ale to je, kde by čerpať novú sekciu ponuky.

Jeden Posledná vec k poznámke je, že pri kreslení tvarov na plátne fillStyle je nastavený s hodnotou rgb (červená, zelená, modrá). Ak chcete nakresliť transparentné tvarov, používate rgba (red, green, blue, alpha).

Dúfam, že má mýtov zbavená trochu vzdelávacieho procesu pre prechod z Jednoduché AS3 programovanie jednoduché plátno programovania. Pridať komentár, ak máte nejaké otázky!