Туториал по JavaScript движку для создания игр Cocos 2D: Инициализация проекта

в 20:47, , рубрики: 2d игры, 2D-движок, canvas, game development, html5, javascript

Туториал по JavaScript движку для создания игр Cocos 2D: Инициализация проекта

Начинаю знакомство с показавшимся интересным 2D движком для создания игр на JavaScript — Cocos 2D. Далее буду переводить стандартный туториал, возможно, подмешивая собственными примерами и ремарками. Надеюсь, тем кому нужно или интересно — пригодится.

Всего туториалов на 3 перевода, по итогам первого — либо продолжу публикацию на Хабре, либо унесу на собственный ресурс.

Что такое и что может Cocos 2d?

Cocos 2D — кроссплатформенный игровой 2D движок, имеющий реализации на С++, С#, Go, Java, Objective-C и JavaScript.

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

Почему JavaScript? Прежде всего перспективность направления. Браузеры приходят к единым стандартам, что неизбежно создает рынок приложений базирующихся на клиентских технологиях, в частности JS. Второе — переносимость. Потенциально можно рассматривать перенос проекта на другую платформу. Основная логика по-идеи должна быть едина.

Введение

В этой серии туториалов вы научитесь создавать новый проект и затем сможете написать очень простой клон арканоида (breakout). Что-то вроде этого. Ну а если у вас вдруг возникнут вопросы или просто захочется высказаться — пишите разработчику — в конце оригинального туториала есть комментарии.

Установка

Windows

На странице загрузок скачать установщик. Запустить установщик.

Для Linux

Если у вас уже есть Node.Js и npm — запустить установку пакета Cocos 2D командой:

npm install cocos2d
Linux или Mac OS X используя ZIP архив

Если у вас нет npm или же просто не хотите его использовать, вы можете установить Cocos 2D, скачав последний ZIP-архив на странице загрузок.

Затем запустите sudo ./install.sh. Скрипт скопирует Cocos2D JavaScript в выбранную вами директорию проекта и создаст симлинк в /usr/local/bin/cocos.

Создание нового проекта

На Windows необходимо использовать ярлык в меню Пуск: Cocos 2D JavaScript > Create new project. Выбрать директорию, например breakout (арканоид). Название директории одновременно будет названием вашего проекта.

В Linux и Mac создание нового проекта делается командой:

cocos new ~/Projects/breakout

Теперь давайте убедимся, что все работает как нужно. Для этого нужно запустить Веб-сервер разработчика.

На Windows это делается нажатием на ярлык «Server project» в директории проекта.

В Linux и Mac в терменале необходимо перейти в директорию проекта:

cd ~/Projects/breakout

И запустить сервер командой:

cocos server

Откройте браузер, например Google Chrome, и введите адрес http://localhost:4000. Если все было сделано правильно — вы увидите черный квадрат с большой надписью «Cocos2d».

Модули

Если вы писали яваскриптики для простеньких сайтов, тогда скорей всего вы не знакомы с концепцией JavaScript модулей. Cocos 2D JavaScript реализует CommonJS Module Spec. Это означает, что если вам нужно получить доступ к объекту, расположенному в другом файле (модулю) вам нужно сначала импортировать его.

Импортировать модуль можно при помощи глобальной функции require. Для того, чтобы модуль cocos2d был постоянно доступен — добавьте следующий код в самое начало файла.

var cocos = require('cocos2d');

Этот код экспортирует все объекты в переменную cocos. Можно получить доступ ко всем объектам и функциям модуля. Все это конечно же будет работать из браузерной консоли. Давайте попробуем с проектом арканоида (breakout). Откройте в браузере Google Chrome консоль разработчика (Меню > Инструменты > Консоль разработчика). Просто введите require('cocos2d') и разверните полученный объект.

image

Классы

Большинство классов в Cocos2D JavaScript наследуются от базового класса BObject. Этот класс имеет дополнительный функционал, без которого пришлось бы туго. Если писать на голом JavaScript и использовать прототипы на прямую — получился бы менее доступный код. Для того, чтобы унаследоваться от объекта BObject (или от его субкласса) вам необходимо использовать метод extend и передать объект, содержащий новые методы и свойства. Пример:

var Cat = BObject.extend({
    voice: "meow",
 
    init: function() {
        Cat.superclass.init.call(this);
    },
 
    speak: function() {
        alert(this.get('voice'));
    }
});

Этот код создаст новый класс Cat, который будет иметь свойство voice и метод speak. Метод init будет конструктором объекта.

Для того чтобы создать экземпляр класса, вам нужно вызвать метод create. Любые аргументы, передаваемые в create будут переданы в метод init. Собственно, для того чтобы создать экземпляр класса Cat, нам необходимо:

var myCat = Cat.create();
myCat.speak();

Свойства

Свойства классов, унаследованных от BObject, будут иметь ряд особенностей, например биндинги и геттеры-сеттеры. Чтобы воспользоваться геттерами-сеттерами, вам необходимо вместо обращения к свойству объекта по точке использовать методы get и set.

Для получения свойства voice класса Cat, нам необходимо:

myCat.get('voice');

И для того, чтобы изменить значение:

myCat.set('voice', 'ROAR!');

Ресурсы

Пришлось бы совсем плохо без таких ресурсов, как изображений, тайлов и различных звуков. Просто положите все эти файлы в директорию src/resources/. Все файлы, находящиеся в данной директории, будут скомпилированы и помещены в результирующий JavaScript файл. Избегайте лишних неиспользуемых файлов — не помещайте в директорию лишние ресурсы, если вы не будете их использовать.

Для получения ресурса в коде используйте глобальную функцию resource. Эта функция вернет объект или строку с содержимым ресурса. Большую часть времени вам необходимо будет просто передавать путь к ресурсу в один из объектов Cocos2D JavaScript — далее объект сам разберется что делать с ресурсом.

Если у вас есть изображение src/resources/sprites.png, чтобы получить доступ к нему, вам необходимо:

resource('/resources/sprites.png');

Этот код вернет HTML элемент Image.

Входная точка приложения

Входной точкой вашего приложения будет являться файл src/main.js. Все, что вы поместите в функцию exports.main файла main.js, будет вызвано автоматически после загрузки страницы. Вам даже не нужно навешивать каких-либо слушателей на событие load — все уже навешено для вас. :)

От автора перевода

Что ж. Вступительная часть переведена, в следующих двух частях в подробностях будет описана работа с ресурсами и создание логики игры. Если вам все таки это пригодится — дайте мне понять это через опрос. Я в ближайшие дни переведу остальные две части.

Автор: jMas

Источник

Поделиться

* - обязательные к заполнению поля