Урок 1 — первый проект на phaser


В уроке используется javascript подразумевается, что читатель знает основы javascript

Фреймворк Phaser.js создан для удобной, кроссбраузерной разработки игр с помошью Html 5. Это как бы дальнейшая разработка pixi.js(Библиотека для рендеринга WebGL). Этот фреймворк изначально был разработан для того, чтобы проекты, созданные с его помошью, было удобно запускать на мобильных устройствах. Для запуска проектров, написанных на этом фреймворке, нужно, чтобы браузер устройства поддерживал canvas.

Для начала создания проекта необходимо

Скачать phaser.js – это можно сделать на официальном сайте. Дальше нужно создать папку для проекта и туда перенести скаченные нами файлы. После создаем index.html.

Дальше идет самое главное в файле index.html мы пишем код с помошью которого мы подключим phaser и выведем надпись

Сначала создадим основу нашего html документа

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Урок 1</title> 
<script src="phaser.min.js">//подключаем phaser 
</script> 
</head> 
<body> 
</body>
</html>

Скачиваем изображение, которое будет нашим фоном. Я назвал его sky.jpg. Дальше после тега body создаем скрипт.

Скрипт

<script> 

var config = { 
type: Phaser.AUTO, 
width: 800, 
height: 600, 
scene: { preload: preload, create: create } };
var game = new Phaser.Game(config); 
function preload () { this.load.image('sky', 'images/sky.jpg'); }
function create () { this.add.image(400, 300, 'sky'); } 
</script>

В этом примере мы создали html страницу на которой загружаем текстуру неба.