PlayN и «Как Rovio Angry Birds на HTML5 писала»
На прошедшей конференции Google IO в Сан Франциско была представлена библиотека PlayN. Сессия называлась — Kick-ass Game Programming. И эта технология действительно заманчиво выглядит. Только представить, что пишешь игру на одном языке на любой ОС и используя любимые IDE, а на выходе получаешь игру под HTML5/Android/Native/Flash(!). PlayN свободный и с открытым исходным кодом, а еще на нем была сделана Angry Birds (HTML5).
Viper Engine и PlayN
Пару недель назад я решил сделать игру на PlayN и понял, что уровень абстракции, который выбрали разработчики не дает быстро создавать игры. Платформа нуждается в фреймворке, который будет решать обычные задачи при написании 2d игр. Такие задачи как: анимация, эффекты частиц, игровая камера, игровая сцена и смена сцен, простая физика, сборка игровых объектов в группы.
Через неделю был сделан alpha вариант движка Viper с помощью которого мы и создадим простую HTML5 игру на Java.
Готовим инструменты
1. Устанавливаем PlayN
Для начала запустим playn и его примеры:
Начало работы с PlayN
Клонируем библиотеку PlayN:
PlayN код содержится в Git. Если у вас установлен Git:
git clone code.google.com/p/playn
Вам нужен Maven версии 3 или выше, чтобы собрать PlayN. Вы можете установить Maven по следующей ссылке :install Maven.
Проверьте версию Maven:
mvn -V
Она должна быть 3 и выше.
После установим playn в локальное хранилище maven'а.
cd playn
mvn clean install
Чтобы запустить один из примеров PlayN:
cd playn/sample/showcase
mvn clean package
mvn test -P test-html
Открываем браузер(конечно Google Chrome) и вводим: 127.0.0.1:8080/
Отлично вы видите перед собой демку, которую инженеры Google представляли на IO.
mvn test -P test-flash
А теперь flash. Вводим: localhost:8080/
cd android
mvn android:deploy
И Android.
Да и не забудьте установить плагины для Eclipse, чтобы продолжить вашу работу в IDE.
Установим Maven Integration for Eclipse выбираем Help → Install New Software, выбираем All Available Sites и делаем поиск по слову maven.
Устанавливаем Google Plugin for Eclipse.
Устанавливаем Web Tools Platform for Eclipse. Выбираем Help → Install New Software..., enter download.jboss.org/jbosstools/updates/m2eclipse-wtp выбираем Work with, и устанавливаем Maven Integration for WTP.
2. Создаем скелет будущей игры в Eclipse
Открываем File → New → Other..., затем выбираем Maven → Maven Project затем жмем далее.
Ставим галочку Include snapshot archetypes и производим двойное нажатие мыши на playn-archetype в списке архетипов.
Настраиваем Group Id, Artifact Id, Version, Package, и gameName.
Group ID пример: com.mydomain.myproject.
Artifact ID пример: gameamazing
Version пример: 1.0-SNAPSHOT или 0.01a
Package пример: com.mydomain.myproject
Ну и gameName пример: LolGame
Жмем Finish и получаем 5 проектов в Package Explorer.
Отлично у нас есть скелет игры.
Для заметки процедура настройки всего этого займет значительно больше времени чем написание самой игры.
3. Получаем Viper Engine с примерами
Viper Demos
git clone Partysun@github.com/Partysun/Viper-Engine-Demos.git
cd Viper-Engine-Demos
mvn clean install
mvn test -P test-html
Теперь импортируем проект в Eclipse.
И можно пользоваться.
Пишем игры
Игра на Viper Engine должна иметь входной класс наследуемый от VipGame.
В конструкторе устанавливаем начальные значения для игры.
public ViperExamples() {
// Устанавливаем размер игрового поля и игрового мира.
// Устанавливаем первую игровую сцену.
// И частоту кадров.
super(640, 480, 800, 800, new LogoDemo(), 33);
}
Игровая сцена на Viper должна быть унаследована от VipState.
И требует обязательной перегрузки метода create();
В нем описывается все что должно находится на сцене. А для динамической обработки в игровых циклах, надо перегрузить метод update();
Вот пример простого создания пары спрайтов и модификаций их во времени:
public class MovingDemo extends VipState{
private VipSprite img;
private VipSprite img2;
private VipKeyboardStandart kListener;
@Override
public void create() {
img = new VipSprite(20, 20, "images/house.png");
add(img);
img.velocity.x = 0.2f;
img2 = new VipSprite(270, 200, "images/house.png");
add(img2);
img2.angularVelocity = 0.002f;
kListener = new VipKeyboardStandart();
addKeybordControl(kListener);
}
@Override
public void update() {
super.update();
if (kListener.ESC) {
VipG.switchState(new LogoDemo());
}
if (img.x > 350)
img.velocity = new VipPoint(0, 0.2f);
if (img.y > 250)
img.velocity = new VipPoint(- 0.2f, 0);
if (img.x < 20)
img.velocity = new VipPoint();
if (img2.scale.x < 2)
img2.scale.x += 0.002f;
if (img2.scale.x > 2)
img2.scale.x = 1.0f;
}
}Резюмируя
Итак, в итоге мы имеем фреймворк для написания игр под Html5/flash/android.
Нет, нет, нет! Все не очень стабильно и плохо пока работает. Пока только HTML5 работает замечательно и очень шустро. Ведь не зря его так долго демонстрировали на IO и Angry Birds писали. Это не может не порадовать ведь писать html5 игры на java по мне значительно удобнее чем на js. Радует пока только сам потенциал будущих возможностей. И этот потенциал может быть реализован только при совместной работе над проектами PlayN от компании Google и Viper Engine(@Partysun).
