Вивчаємо CreateJS на прикладі створення гри Пінг-Понг

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

Веб-технології розвиваються швидкими темпами – настільки, що наш оригінальний посібник по EaselJS вже не актуальний. У цьому посібнику ви дізнаєтеся, як використовувати найновіший набір бібліотек CreateJS, на прикладі створення простої копії гри Пінг-Понг.

Попередній перегляд кінцевого результату

Давайте подивимося на кінцевий результат, до якого будемо наближатися.

Клацніть для початку гри

Ця робота заснована на посібнику Carlos Yanez «Create a Pong Game in HTML5 With EaselJS», що в свою чергу засновано на його «Getting Started With EaselJS». Всі графічні дані та звукові ефекти взяті з вищезазначеного посібника.

Крок 1: Створіть `index.html`

Далі наводиться його вміст:

<!DOCTYPE html>
<html>
  <head>
		<title>Pong</title>
		
		<style>/* Removes Mobile Highlight */ *{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>

		<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
		<script src="http://code.createjs.com/tweenjs-0.2.0.min.js"></script>
		<script src="http://code.createjs.com/soundjs-0.2.0.min.js"></script>
		<script src="http://code.createjs.com/preloadjs-0.1.0.min.js"></script>
		<script src="http://code.createjs.com/movieclip-0.4.1.min.js"></script>
		<script src="assets/soundjs.flashplugin-0.2.0.min.js"></script>
		<script src="Main.js"></script>
		
	</head>
	<body onload="Main();">
		<canvas id="PongStage" width="480" height="320"></canvas>
	</body>
</html>

Як ви бачите, він доволі короткий і головним чином містить рядки для скачування бібліотек CreateJS.

З моменту виходу CreateJS нам більше немає необхідності завантажувати файли та розміщувати їх на власному сервері; тепер файли розміщуються на CDN (* content delivery network – мережа доставки (розповсюдження) контенту. Тут і далі примітка перекладача), завдяки якій ми можемо завантажувати ці файли віддалено на максимальній швидкості.

Давайте проглянемо код:

1	<style>/* Removes Mobile Highlight / {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>

У цьому рядку ми прибираємо підсвічування, що може виникнути при спробі пограти у гру на телефоні. (Завдяки цьому не буде підсвічуватися об'єкт canvas, що відбувається на телефонах при русі пальців).

Далі йдуть бібліотеки для завантаження бібліотек CreateJS:

<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
		<script src="http://code.createjs.com/tweenjs-0.2.0.min.js"></script>
		<script src="http://code.createjs.com/soundjs-0.2.0.min.js"></script>
		<script src="http://code.createjs.com/preloadjs-0.1.0.min.js"></script>
		<script src="http://code.createjs.com/movieclip-0.4.1.min.js"></script>

Завдяки цьому коду відбувається завантаження файлів JS з CDN для CreateJS і у нас є можливість використовувати будь-які функції CreateJS у нашому коді.

Далі ми завантажуємо плаґін Flash (* мультимедійна програмна платформа компанії Adobe Systems для створення веб-додатків, рекламних банерів, анімацій, ігор, десктопних застосувань і також для виконання на веб-сторінках відео- та аудіозаписів. У липні 2017 року Adobe визнала технологію Flash застарілою, її життєвий цикл буде завершено наприкінці 2020 року, коли Adobe припинить підтримку та розповсюдження Flash) SoundJS, що забезпечує підтримку звуку для браузерів, що не підтримують HTML5 Audio. Вона реалізується за допомогою використання SWF (* Small Web Format) (об'єкта Flash) для завантаження звуків.

1	<script src="assets/soundjs.flashplugin-0.2.0.min.js"></script>

У цьому випадку ми не будемо використовувати CDN; замість цього ми завантажимо бібліотеку SoundJS з http://createjs.com/#!/SoundJS/download та розмістимо файли soundjs.flashplugin-0.2.0.min.js та FlashAudioPlugin.swf до локальної бібліотеки під назвою assets.

Останнім з файлів JS ми завантажимо файл Main.js, в якому буде розташовано весь код для нашої гри:

1	<script src="Main.js"></script>

І, нарешті, давайте помістимо об'єкт Canvas на нашу сцену.

1	<body onload="Main();">
2	<canvas id="PongStage" width="480" height="320"></canvas>
3	</body>

Тепер ми можемо почати працювати над кодом для гри.

Крок 2: Змінні

Код нашої гри буде знаходитися у файлі під назвою Main.js, так що зараз створіть та збережіть його.

Для початку давайте визначимо змінні для всіх графічних об'єктів у грі:

var canvas; //Will be linked to the canvas in our index.html page
var stage; //Is the equivalent of stage in AS3; we'll add "children" to it

// Graphics
//[Background]

var bg; //The background graphic

//[Title View]
 

var main; //The Main Background
var startB; //The Start button in the main menu
var creditsB; //The credits button in the main menu

//[Credits]


var credits; //The Credits screen

//[Game View]


var player; //The player paddle graphic
var ball; //The ball graphic
var cpu; //The CPU paddle
var win; //The winning popup
var lose; //The losing popup

Я додав коментар до кожної змінної, щоб ви знали, що буде поміщатися до неї.

Далі переходимо до рахування очок:

//[Score]

var playerScore; //The main player score
var cpuScore; //The CPU score
var cpuSpeed=6; //The speed of the CPU paddle; the faster it is the harder the game is

Нам будуть необхідні змінні для зберігання значень швидкості м'яча:

1	// Variables
2
3	var xSpeed = 5;
4	var ySpeed = 5;

Ви можете змінювати ці значення на будь-які, якщо ви захочете ускладнити або спростити гру.

Якщо ви – розробник на Flash, то знаєте, що метод onEnterFrame Flash дуже корисний при розробці ігор, оскільки є події, які повинні відбуватися у кожному фреймі. (Якщо ви не знайомі з цією ідеєю, то ознайомтеся зі статтею про Game Loop)

Ми маємо еквівалент для onEnterFrame в CreateJS – об'єкт ticker, завдяки якому можна виконувати код кожну долю секунди. Давайте створимо змінну, у якій буде посилання на нього:

1	var tkr = new Object;

Далі йдуть змінні для попереднього завантажувача, що буде використовувати методи нової бібліотеки PreloadJS.

1	//preloader
2	var preloader;
3	var manifest;
4	var totalLoaded = 0;

в preloader буде міститися об'єкт PreloadJS.
в manifest (* список вантажів та пасажирів літака або поїзда) буде знаходитися список файлів, що нам необхідно завантажити.
в totalLoaded буде міститися кількість вже завантажених файлів.

Остання, але не менш важлива, ніж решта, змінна в нашому списку – TitleView, в якій будуть знаходитися зображення для їх сумісного відображення (подібно DisplayObjectContainer во Flash).

1	var TitleView = new Container();

Давайте перейдемо до функції Main ...

Крок 3: Функція Main()

Ця функція виконується першою після завантаження всіх файлів JS, що вказані в index.html. Де вона викликається?

Що ж, пам'ятаєте рядок в index.html?

1	<body onload="Main();">

У цьому фрагменті коду повідомляється, що одразу після завантаження HTML (і бібліотек JS) повинна бути виконана функція Main.

Давайте проглянемо її:

function Main()
{
	/* Link Canvas */
	
	canvas = document.getElementById('PongStage');
  	stage = new Stage(canvas);
  		
  	stage.mouseEventsEnabled = true;
  	
  	
	/* Set The Flash Plugin for browsers that don't support SoundJS */
  	SoundJS.FlashPlugin.BASE_PATH = "assets/";
    if (!SoundJS.checkPlugin(true)) {
      alert("Error!");
      return;
    }

  	manifest = [
				{src:"bg.png", id:"bg"},
				{src:"main.png", id:"main"},
				{src:"startB.png", id:"startB"},
				{src:"creditsB.png", id:"creditsB"},
				{src:"credits.png", id:"credits"},
				{src:"paddle.png", id:"cpu"},
				{src:"paddle.png", id:"player"},
				{src:"ball.png", id:"ball"},
				{src:"win.png", id:"win"},
				{src:"lose.png", id:"lose"},
				{src:"playerScore.mp3|playerScore.ogg", id:"playerScore"},
				{src:"enemyScore.mp3|enemyScore.ogg", id:"enemyScore"},
				{src:"hit.mp3|hit.ogg", id:"hit"},
				{src:"wall.mp3|wall.ogg", id:"wall"}
			];



  	preloader = new PreloadJS();
  	preloader.installPlugin(SoundJS);
    preloader.onProgress = handleProgress;
    preloader.onComplete = handleComplete;
    preloader.onFileLoad = handleFileLoad;
    preloader.loadManifest(manifest);

	/* Ticker */
	
	Ticker.setFPS(30);
	Ticker.addListener(stage);
}

Давайте проаналізуємо кожну частину:

1	canvas = document.getElementById('PongStage');
2	stage = new Stage(canvas);
3
4	stage.mouseEventsEnabled = true;

Тут ми присвоюємо до змінної canvas об'ект Canvas PongStage із файлу index.html і потім з його допомогою створюємо об'єкт класу Stage . (Завдяки ій ми зможемо розміщувати об'єкти на canvas)

Завдяки mouseEventsEnabled ми можемо скористатися подіями, що виникають при діях з мишкою, для реагування на рухи та кліки мишки.

/* Set The Flash Plugin for browsers that don't support SoundJS */
  	SoundJS.FlashPlugin.BASE_PATH = "assets/";
    if (!SoundJS.checkPlugin(true)) {
      alert("Error!");
      return;
    }

Тут ми налаштовуємо розміщення плаґіна для звуку Flash для тих браузерів, що не підтримують HTML5 Audio.

	manifest = [
				{src:"bg.png", id:"bg"},
				{src:"main.png", id:"main"},
				{src:"startB.png", id:"startB"},
				{src:"creditsB.png", id:"creditsB"},
				{src:"credits.png", id:"credits"},
				{src:"paddle.png", id:"cpu"},
				{src:"paddle.png", id:"player"},
				{src:"ball.png", id:"ball"},
				{src:"win.png", id:"win"},
				{src:"lose.png", id:"lose"},
				{src:"playerScore.mp3|playerScore.ogg", id:"playerScore"},
				{src:"enemyScore.mp3|enemyScore.ogg", id:"enemyScore"},
				{src:"hit.mp3|hit.ogg", id:"hit"},
				{src:"wall.mp3|wall.ogg", id:"wall"}
			];

У змінній manifest ми розміщуємо масив файлів, які хочемо завантажити (і задаємо для кожного унікальний ID). Кожний звук представлено у двох форматах – MP3 та OGG – оскільки браузери підтримують різні формати.

  	preloader = new PreloadJS();
  	preloader.installPlugin(SoundJS);
    preloader.onProgress = handleProgress;
    preloader.onComplete = handleComplete;
    preloader.onFileLoad = handleFileLoad;
    preloader.loadManifest(manifest);

Тут ми налаштовуємо об'єкт preloader за допомогою PreloadJS. PreloadJS – новий додаток до бібліотеки CreateJS, і доволі корисний.

Ми створюємо новий об'єкт PreloadJS і поміщаємо його до змінної preloader, потім задаємо метод для оброблення кожної події (onProgress, onComplete, onFileLoad). Нарешті, ми використовуємо preloader для завантаження раніше створеного списку файлів.

1	Ticker.setFPS(30);
2	Ticker.addListener(stage);

Тут ми додаємо об'єкт Ticker на сцену та задаємо частоту зміни кадрів рівною 30 FPS (* frame per second – кадрів за секунду); ми будемо її використовувати пізніше у грі для реалізації функціональності enterFrame.

Крок 4: Створення функції для реалізації попереднього завантаження

function handleProgress(event)
{
	//use event.loaded to get the percentage of the loading
}

function handleComplete(event) {
         //triggered when all loading is complete
}

function handleFileLoad(event) {
         //triggered when an individual file completes loading
            
         switch(event.type)
         {
         	case PreloadJS.IMAGE:
         	//image loaded
         	 var img = new Image();
              img.src = event.src;
              img.onload = handleLoadComplete;
              window[event.id] = new Bitmap(img);
         	break;

         	case PreloadJS.SOUND:
         	//sound loaded
         	handleLoadComplete();
         	break;
         }
}

Давайте проглянемо функцію:

handleProgress - у цій функції ви зможете прослідкувати за процентом ходу завантаження за допомогою цього параметра: event.loaded. Ви могли би використовувати його для створення індикатора виконання ходу завдання.
handleComplete - ця функція викликається одразу після завантаження всіх файлів (на випадок, якщо ви помістили до неї щось).
handleFileLoad – оскільки ми завантажуємо два види файлів – зображення та звук – у нас є ця функція для оброблення їх окремо один від одного. Якщо це – зображення, то ми створюємо растрове зображення та поміщаємо його до змінної (з тою ж назвою, що й в ID завантаженого зображення), а потім викликаємо функцію handleLoadComplete (яку напишемо далі); якщо ж це – звук, то ми одразу викликаємо handleLoadComplete.

Тепер давайте обговоримо тільки-но згадану handleLoadComplete:

 function handleLoadComplete(event) 
 {

	totalLoaded++;
	
	if(manifest.length==totalLoaded)
	{
		addTitleView();
	}
 }

У ній доволі все зрозуміло: ми збільшуємо значення змінної totalLoaded (в якій міститься кількість ресурсів, завантажених на даний момент) і потім перевіряємо, чи співпадає кількість елементів у manifest з кількістю завантажених ресурсів, і якщо так, то переходимо до екрану Main Menu (* Головне меню).

Крок 5: Створення Main Menu

function addTitleView()
{
	//console.log("Add Title View");
	startB.x = 240 - 31.5;
	startB.y = 160;
	startB.name = 'startB';
	
	creditsB.x = 241 - 42;
	creditsB.y = 200;
	
	TitleView.addChild(main, startB, creditsB);
	stage.addChild(bg, TitleView);
	stage.update();
	
	// Button Listeners
	
	startB.onPress = tweenTitleView;
	creditsB.onPress = showCredits;

Тут нема нічого особливого. Ми розміщуємо зображення для фону, кнопок Start та Credits (* список розробників) на сцені і задаємо обробники події onPress для кнопок Start та Credits.

Нижче наведено функції для показу та видалення екрану Credits та tweenTitleView, із запуску якої починається гра:

function showCredits()
{
	// Show Credits
		
	credits.x = 480;
		
	stage.addChild(credits);
	stage.update();
	Tween.get(credits).to({x:0}, 300);
	credits.onPress = hideCredits;
}

// Hide Credits

function hideCredits(e)
{
	Tween.get(credits).to({x:480}, 300).call(rmvCredits);
}

// Remove Credits

function rmvCredits()
{
	stage.removeChild(credits);
}

// Tween Title View

function tweenTitleView()
{		
	// Start Game
		
	Tween.get(TitleView).to({y:-320}, 300).call(addGameView);
}

Крок 6: Код гри

Ми підійшли до головної частини цього посібника – до коду самої гри.

Для початку нам необхідно додати всі необхідні ресурси на сцену, що ми й робимо у функції addGameView:

function addGameView()
{
	// Destroy Menu & Credits screen
	
	stage.removeChild(TitleView);
	TitleView = null;
	credits = null;
	
	// Add Game View
	
	player.x = 2;
	player.y = 160 - 37.5;
	cpu.x = 480 - 25;
	cpu.y = 160 - 37.5;
	ball.x = 240 - 15;
	ball.y = 160 - 15;
	
	// Score
	
	playerScore = new Text('0', 'bold 20px Arial', '#A3FF24');
	playerScore.x = 211;
	playerScore.y = 20;
	
	cpuScore = new Text('0', 'bold 20px Arial', '#A3FF24');
	cpuScore.x = 262;
	cpuScore.y = 20;
	
	stage.addChild(playerScore, cpuScore, player, cpu, ball);
	stage.update();
	
	// Start Listener 
	
	bg.onPress = startGame;
}

Знову у функції доволі все зрозуміло: відбувається розміщення об'єктів на екрані та додавання mouseEvent (* обробника подій, що виникають при виконанні дій із мишкою) до фонового зображення, завдяки чому при кліку його користувачем починається гра (буде викликано функцію startGame).

Давайте проглянемо функцію startGame:

function startGame(e)
{
	bg.onPress = null;
	stage.onMouseMove = movePaddle;
	
	Ticker.addListener(tkr, false);
	tkr.tick = update;
}

Тут, як ви бачите, окрім додавання обробника для події onMouseMove, завдяки якому відбувається рух нашої ракетки, ми додаємо обробник для події tick, завдяки чому буде викликано функцію update для кожного фрейма.

Давайте розглянемо функції movePaddle та reset:

function movePaddle(e)
{
	// Mouse Movement
	player.y = e.stageY;
}

/* Reset */

function reset()
{
	ball.x = 240 - 15;
	ball.y = 160 - 15;
	player.y = 160 - 37.5;
	cpu.y = 160 - 37.5;
	
	stage.onMouseMove = null;
	Ticker.removeListener(tkr);
	bg.onPress = startGame;
}

У movePaddle ми власне розміщуємо ракетку користувача до координати y миші.

У reset ми здійснюємо дещо подібне, що робили в addGameView, проте тут ми не додаємо ніяких графічних елементів, оскільки вони вже знаходяться на екрані.

За допомогою функції alert ми показуємо повідомлення про програш або перемогу.

function alert(e)
{
	Ticker.removeListener(tkr);
	stage.onMouseMove = null;
	bg.onPress = null
	
	if(e == 'win')
	{
		win.x = 140;
		win.y = -90;
	
		stage.addChild(win);
		Tween.get(win).to({y: 115}, 300);
	}
	else
	{
		lose.x = 140;
		lose.y = -90;
	
		stage.addChild(lose);
		Tween.get(lose).to({y: 115}, 300);
	}
}

Крок 7: Ігровий цикл

Тепер переходимо до останньої частини нашого посібника, де розглянемо функцію update (яка виконується для кожного фрейма гри – подібно onEnterFrame Flash).

function update()
{
	// Ball Movement 

	ball.x = ball.x + xSpeed;
	ball.y = ball.y + ySpeed;
	
	// Cpu Movement
	
	if(cpu.y < ball.y) {
		cpu.y = cpu.y + 4;
	}
	else if(cpu.y > ball.y) {
		cpu.y = cpu.y - 4;
	}
	
	// Wall Collision 

	if((ball.y) < 0) { ySpeed = -ySpeed; SoundJS.play('wall'); };//Up
	if((ball.y + (30)) > 320) { ySpeed = -ySpeed; SoundJS.play('wall');};//down
	
	/* CPU Score */
	
	if((ball.x) < 0)
	{
		xSpeed = -xSpeed;
		cpuScore.text = parseInt(cpuScore.text + 1);
		reset();
		SoundJS.play('enemyScore');
	}
	
	/* Player Score */
	
	if((ball.x + (30)) > 480)
	{
		xSpeed = -xSpeed;
		playerScore.text = parseInt(playerScore.text + 1);
		reset();
		SoundJS.play('playerScore');
	}
	
	/* Cpu collision */
	
	if(ball.x + 30 > cpu.x && ball.x + 30 < cpu.x + 22 && ball.y >= cpu.y && ball.y < cpu.y + 75)
	{
		xSpeed *= -1;
		SoundJS.play('hit');
	}
	
	/* Player collision */
	
	if(ball.x <= player.x + 22 && ball.x > player.x && ball.y >= player.y && ball.y < player.y + 75)
	{
		xSpeed *= -1;
		SoundJS.play('hit');
	}
	
	/* Stop Paddle from going out of canvas */
	
	if(player.y >= 249)
	{
		player.y = 249;
	}
	
	/* Check for Win */
	
	if(playerScore.text == '10')
	{
		alert('win');
	}
	
	/* Check for Game Over */
	
	if(cpuScore.text == '10')
	{
		alert('lose');
	}
}

Виглядає застрашливо, чи не так? Не турбуйтеся, ми розглянемо кожну частину та обговоримо її.

1	// Ball Movement
2
3	ball.x = ball.x + xSpeed;
4	ball.y = ball.y + ySpeed;

У кожному фреймі м'яч буде рухатися згідно з його значенням швидкості по x та y.

1	// Cpu Movement
2
3	if((cpu.y+32) < (ball.y-14)) {
4	cpu.y = cpu.y + cpuSpeed;
5	}
6	else if((cpu.y+32) > (ball.y+14)) {
7	cpu.y = cpu.y - cpuSpeed;
8	}

Тут у нас представлено базовий AI (* artificial intelligence – штучний інтелект) комп'ютера, завдяки якому ракетка комп'ютера просто слідкує за м'ячем без будь-якої спеціальної логіки. Ми просто порівнюємо положення центру ракетки (чому ми і додаємо 32 пікселі до значення Y cpu) з положенням м'яча (з невеликим відступом) та рухаємо ракетку в необхідному напрямку: вниз або вгору.

if((ball.y) < 0) { //top
	ySpeed = -ySpeed; 
	SoundJS.play('wall'); 
};
if((ball.y + (30)) > 320) { //bottom
	ySpeed = -ySpeed; 
	SoundJS.play('wall');
};

Якщо м'яч зіштовхується з верхньою або нижньою границею, то м'яч змінює свій напрямок і ми програємо звук Wall Hit (* звук зіткнення з границею).

 	/* CPU Score */
 	if((ball.x) < 0)
 	{
 		xSpeed = -xSpeed;
 		cpuScore.text = parseInt(cpuScore.text + 1);
 		reset();
 		SoundJS.play('enemyScore');
 	}
 	/* Player Score */
  	if((ball.x + (30)) > 480)
 	{
 		xSpeed = -xSpeed;
 		playerScore.text = parseInt(playerScore.text + 1);
 		reset();
 		SoundJS.play('playerScore');
 	}

Реалізувати вивід очок просто: якщо м'яч перетинає ліву або праву границі, то відбувається збільшення кількості очка гравця або супротивника, програвання звуку та скидання значень положення об'єктів за допомогою функції reset, яку ми раніше обговорювали:

 
/* CPU collision */
if(ball.x + 30 > cpu.x && ball.x + 30 < cpu.x + 22 && ball.y >= cpu.y && ball.y < cpu.y + 75)
{
	xSpeed *= -1;
	SoundJS.play('hit');
}
/* Player collision */
if(ball.x <= player.x + 22 && ball.x > player.x && ball.y >= player.y && ball.y < player.y + 75) 	
{ 		
 	xSpeed *= -1;
 	SoundJS.play('hit');
 }

Тут ми маємо справу із зіткненням м'яча з ракетками; кожного разу після зіткнення м'яча з однією з ракеток м'яч змінює свій напрямок та програється відповідний звук.

1	if(player.y >= 249)
2	{
3	player.y = 249;
4	}

Якщо ракетка гравця виходить за межі, то ми повертаємо її назад.

 /* Check for Win */
 if(playerScore.text == '10')
 {
 	alert('win'); 	
} 	 	
/* Check for Game Over */
if(cpuScore.text == '10')
{
 	alert('lose'); 	
}

У даному фрагменті коду ми перевіряємо, чи досягла кількість очок когось із гравців 10, і якщо це так, то показуємо користувачеві повідомлення про перемогу або програш (відповідно до його результатів).

Завершення

От і все, ви створили повноцінну гру Пінг-Понг за допомогою CreateJS. Дякую за проявлену зацікавленість!