Написать игру для Android за 1 час. Реально? / forpes.ru

Главная
Написать игру для Android за 1 час. Реально?

Написать игру для Android за 1 час. Реально? +2

18.08.2015 17:38

Skaner 12 7377 Источник

Задался я вопросом, как вообще быстро можно разработать игру для Android. На скорую руку, абы как, но, чтобы запустилась и начала играть.
Про конструкторы подумал, но решил их не трогать, ибо нельзя по условиям. Для чего мне такие жесткие условия? Для конкурса. Хочу себя поднатаскать.

Основные требования к разрабатываемой игре:
— Запускаемость в эмуляторе Android
— Запускаемость на конкретном Android устройстве (обязательно!!!)
— Высокая скорость разработки

Какую игру буду делать: простая игрушка, три игровых состояния: Стартовое меню, Игра, Меню GameOver.

На поле есть айфон, который ловит падающие яблочки от Эппл.

В качестве инструмента был взят JavaScript, J2ds (2D движок) и Intel XDK.

Подготовить проект оказалось проще простого: распаковать архив с движком, запустить текстовые редактор и браузер. Вот и все. Заодно и отладка в виде консоли браузера.

Если все еще интересно, прошу под кат =)

Что ж, теперь к реализации задуманного. У меня есть всего час на разработку, с допущениями и поблажками, т.к. это первый опыт такой скоростной разработки, я приступил. Изучить J2ds проще простого, т.к. нет ничего сложного.

Далее я буду приводить куски кода, с некоторыми пояснениями.

Подготовка игровой сцены.

Так как я выбрал 2D движок в HTML5, то подготовка сцены — это создание специального формата HTML странички.

index.html

<!DOCTYPE html>
<html> 
 <head>
  <script type="text/javascript" src="j2ds/engineMath.js"></script>
  <script type="text/javascript" src="j2ds/engineKey.js"></script>   
  <script type="text/javascript" src="j2ds/engineDOM.js"></script>
  <script type="text/javascript" src="j2ds/engine2D.js"></script>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width,user-scalable=no" />  
  <title></title>
 </head>

<body id="gameBody">

<img id="buttons" src="img/buttons.png" alt="">

 <canvas id="iCanvas" width="100" height="100"></canvas>
<br> <div id="hint"></div>

<script type="text/javascript">
initKeyBoard('gameBody');

scene= createScene('iCanvas', '#ceeeee');

startGame();
</script>

</body>
</html>

Т.к. в нашей игре будут не только примитивы, но и красивые картинки, загрузим одну большую картинку этой строчкой:

<img id="buttons" src="img/buttons.png" alt="">

Сама картинка выглядит так:

Спрайт-карта

Основной файл, в котором я подглядывал функции: namespaces.js, там все функции разобраны по разделам и с комментариями.

В игре будет производиться работа с тачскрином, поэтому нам нужно инициализировать устройство ввода. В J2ds это делается командой «initKeyBoard()». Кроме того, нужно создать игровую сцену, чтобы движок ее обрабатывал и а так же создать из нашего изображения «buttons» спрайт-карту. Делается следующими командами:

initKeyBoard('game');
buttons= CreateImageMap('buttons'); // id объекта HTML
scene= createScene('canvas',  // Первый агрумент - id объекта Сanvas
                    'rgb(250, 250, 200)'); // Второй агрумент - цвет фона

Как только мы инициализировали игровую сцену, развернем ее на весь экран:

scene.fullScreen(true);

Далее нам нужно создать анимации. В J2ds анимация — это один и более кадров одного и того же изображения. Кадров может быть сколько угодно. Кроме того, спайт-карт так же может быть сколько угодно. Мы загрузили только одну, пришло время вытащить из нее необходимые кадры:


// Кнопочки управления платформой
anim= buttons.CreateAnimation(
                 0, 0,   // Начальная позция первого кадра
                 300, 300, // Размер кадра
                 2       // Количество кадров (по горизонтали)
                 );
// Анимация яблочка
apples= buttons.CreateAnimation(
                 8, 325,   // Начальная позция первого кадра
                 81, 89, // Размер кадра
                 2       // Количество кадров (по горизонтали)
                 );
// Айфон                 
iPhone= buttons.CreateAnimation(
                 210, 345,   // Начальная позция первого кадра
                 312, 56, // Размер кадра
                 2       // Количество кадров (по горизонтали)
                 );

Пришло время поговорить об игровых состояниях.
При запуске игры запускается первое игровое состояние — Стартовое меню. Давайте с ним и поработаем.

Разработка стартового меню

Выглядит стартовое меню так:

Меню для игры скриншот

Ниже приведен код функции «Menu()» с комментариями:

Меню для игры JS


// Создание зеленого прямоугольника
newGame= CreateRect( 
               90, 20, // Положение
               150, 100, // Размеры
               'green' // Цвет
              );

// Создание красного прямоугольника
exitGame= CreateRect( 
               90, 20, // Положение
               150, 100, // Размеры
               'red' // Цвет
              );

dY= -100; // Переменная для смещения меню (для плавного появления сверху вниз)
// А теперь опишем саму функцию меню
function Menu() {
 Mouse.updPosition(scene); // Обновляем позицию курсора/тач-касания относительно сцены
 dY+= dY > 0 ? 0 : 1; // смещаем меню вниз до -100px
 
// Если произведен клик/тач по зеленому прямоугольнику - переключаемся на игровой процесс
// а так же окращиваем зеленый прямоугольник белым цветом, символизируя реакцию игры на действия пользователя
 if (Mouse.Click && Mouse.onNode(newGame)) {
  newGame.color= 'white';
  SetActivEngine(Game);
 }
 
// Аналогично и для красного прямоугольника, только с выходом из игры
  if (Mouse.Click && Mouse.onNode(exitGame)) {
  exitGame.color= 'white';
  ExitGame();
 }
 

// Выводим текст со смещением dY
 scene.DrawTextOpt( 
                   170, 100+dY, // Позиция
                  'Rect Game', // Текст
                  'bold 30px sans-serif', // Шрифт (аналогично CSS)
                  'white', // Цвет текста
                  'green', // Цвед обводки
                  6 // Толщина обводки
                  );
                                   
                  
// Позиционируем зеленый прямоугольник со смещением
 newGame.setPosition(120, 200+dY);                   
 newGame.Draw(scene); // рисуем его

// То же самое для красного прямоугольника
 exitGame.setPosition(370, 200+dY);                   
 exitGame.Draw(scene);
  
// Рисуем надпись поверх зеленого прямоугольника
 scene.DrawText(90, 190+dY,  // Позиция
               'Новая игра'); // Текст
// Аналогично для красного
 scene.DrawText(350, 190+dY,  // Позиция
               'Bыход'); // Текст 
 
}

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

Аналогично этой функции есть функция GameOver, которая отличается только выводимым текстом «Game Over» вместо названия «Rect Game»:

Меню GameOver


function GameOver() {
 Mouse.updPosition(scene); 
 dY+= dY > 0 ? 0 : 1;
 
 if (Mouse.Click && Mouse.onNode(newGame)) {
  newGame.color= 'white';
  SetActivEngine(Game);
 }
 
  if (Mouse.Click && Mouse.onNode(exitGame)) {
  exitGame.color= 'white';
  ExitGame();
 }
 
 scene.DrawTextOpt( 
                   170, 100+dY, // Позиция
                  'Game Over', // Текст
                  'bold 30px sans-serif', // Шрифт (аналогично CSS)
                  'white', // Цвет текста
                  'green', // Цвед обводки
                  6 // Толщина обводки
                  );
                                   
                  
 newGame.setPosition(120, 200+dY);                   
 newGame.Draw(scene);

 exitGame.setPosition(370, 200+dY);                   
 exitGame.Draw(scene);
  
 scene.DrawText(90, 190+dY,  // Позиция
               'Новая игра'); // Текст
 scene.DrawText(350, 190+dY,  // Позиция
               'Bыход'); // Текст 	
}

Уже хорошо. Осталось самое главное: игровой процесс. Тут все гораздо интереснее!

Помните, мы ранее загрузили спрайт-карту с кнопками? Пришло время ею воспользоваться! Создадим две кнопки для управления айфоном:

move= []; // массив с двумя кнопками

move[0]= CreateSprite(
    0, 200, // Позиция в игре
    100, 100, // Размеры в игре
    anim    // Анимация 
   );

move[1]= CreateSprite(
    400, 200, // Позиция в игре
    100, 100, // Размеры в игре
    anim    // Анимация
   );

Немного поясню: anim — это объект анимации, который мы создавали вначале, прокрутите вверх, посмотрите, чтобы лучше понять. amin хранит у нас два кадра: первый — стрелка влево, второй — стрелка вправо. Идем дальше.

А дальше нам нужно создать сам айфон, который будет ловить яблочки от эппл:

me= CreateSprite(
    250, 180, // Позиция в игре
    100, 20, // Размеры в игре
    iPhone    // Анимация
   );

Вроде всё. А, не все! Самих яблочек то нет! Даавй тоже их создадим:

arr= []; count= 5; // Объявим массив и количество яблок
// Затем циклом создадим их
for (var i=0; i<count; i+=1) {
 arr[i]= CreateSprite(
    Random(0, 450), -50, // Позиция в игре (по оси Х они рандомятся, чтобы падали по всей ширине)
    20, 20, // Размеры в игре
    apples    // Анимация (хранит в себе два кадра анимации)
   );
 arr[i].speed= Random(1, 3); // Устанавливаем скорость падения яблочка рандомно
}

Объявим еще три переменных:

speed= 4; score= 0; gameOverScore= 0;

Они нужны для подсчета пойманных и упущенных яблочек, а так же скорости перемещения айфона.

Теперь пришло время написать самую главную функцию: саму игру!

функция Game()

function Game() {
// Обновляем позицию курсора/тач-касания
 Mouse.updPosition(scene); 
 
 // Если игрок пропустил более 10 яблок, то Гейм Овер
  if (gameOverScore > 10)  {
   dY= -100;
   SetActivEngine(GameOver);
   gameOverScore= 0;
  } 
 
 // Если кликает ли жмет на экран влево, двигаем айфон влево, пока не упрется в стену
 if (Mouse.Click && Mouse.onNode(move[0])) {
  if (me.posX > 0) me.Move(-speed, 0); 
 }
 
// Аналогично и вправо
 if (Mouse.Click && Mouse.onNode(move[1])) {
  if (me.posX+me.sizeX < scene.Canvas.width) me.Move(speed, 0); 
 }

// Начинаем цикл для проверки яблок
 for (var i=0; i<count; i+=1) {
  
// Если яблоко коснулось айфона, мы перекидываем его за пределы видимости вверх (оно снова падает)
// А игрок получает очко (игровое) и прибавляет в скорости
 if (arr[i].Collision(me)) {
  score+=1; speed+=0.2;
   arrNewPos(i); // фнукция для перекидывания яблочка наверх
 }  
  
// Если пользователь пропустил яблочко, он приближается к своему концу
// А яблочко снова перемещается и падает
  if (arr[i].posY > me.posY) {
   arrNewPos(i); gameOverScore+=1;
  }  
  
 // двигаем яблочко вниз с его скоростью
  arr[i].Move(0, arr[i].speed);
// рисуем яблочко, анимируя его (в этом случае скорость анимации: 10)
  arr[i].DrawAnimate(scene, 10);
 } 
 
// После всех яблочек рисуем айфон
 me.Draw(scene);
 
// Выводим счет игрока вверху экрана
 scene.DrawTextOpt( 
                   5, 5, // Позиция
                  'Игровой счет: '+score, // Текст
                  'bold 25px sans-serif', // Шрифт (аналогично CSS)
                  'white', // Цвет текста
                  'green', // Цвед обводки
                  3 // Толщина обводки
                  );
                   
// рисуем наши кнопки управления, где второй параметр функции Draw() - это номер кадра.
// Если не забыли, 1 кадр - стрелка влево, 2 вправо
 move[0].Draw(scene, 1); move[1].Draw(scene, 2);
 
// дебаг, выводит количество упущенных яблочек
 dbg(gameOverScore);
}

// функция, перемещающая яблочко за пределы видимости камеры вверх
// рандомно устанавливает позицию и рандомно присваивает скорость
function arrNewPos(_i) {
	arr[_i].setPosition(Random(0, scene.Canvas.width-arr[_i].sizeY), 
                     -Random(50, 300));
 arr[_i].speed= Random(2, 5);  
}

Вот и весь игровой цикл, выглядит это вот так:

Смотреть

И остался последний штрих, игру нужно запустить:

startGame(Menu, 30); // запускает игровое состояние Menu() и устанавливает сцене ограничение в 30 fps

Вот и все. Теперь, код целиком:

index.html

<!DOCTYPE html>
<html> 
 <head>
  <script type="text/javascript" src="j2ds/engineMath.js"></script>
  <script type="text/javascript" src="j2ds/engineKey.js"></script>   
  <script type="text/javascript" src="j2ds/engineDOM.js"></script>
  <script type="text/javascript" src="j2ds/engine2D.js"></script>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width,user-scalable=no" />  
  <title>Rect Game</title>
 </head>

<body id="game">

 <img id="buttons" src="img/buttons.png" alt="">

 <canvas id="canvas" width="500" height="300"></canvas>
<br> <div id="hint"></div>

<script type="text/javascript">
initKeyBoard('game');

buttons= CreateImageMap('buttons'); // id объекта HTML

scene= createScene('canvas',  // Первый агрумент - id объекта Сanvas
                    'rgb(250, 250, 200)'); // Второй агрумент - цвет фона

scene.fullScreen(true);

anim= buttons.CreateAnimation(
                 0, 0,   // Начальная позция первого кадра
                 300, 300, // Размер кадра
                 2       // Количество кадров (по горизонтали)
                 );

apples= buttons.CreateAnimation(
                 8, 325,   // Начальная позция первого кадра
                 81, 89, // Размер кадра
                 2       // Количество кадров (по горизонтали)
                 );
                 
iPhone= buttons.CreateAnimation(
                 210, 345,   // Начальная позция первого кадра
                 312, 56, // Размер кадра
                 2       // Количество кадров (по горизонтали)
                 );


newGame= CreateRect( 
               90, 20, // Положение
               150, 100, // Размеры
               'green' // Цвет
              );

exitGame= CreateRect( 
               90, 20, // Положение
               150, 100, // Размеры
               'red' // Цвет
              );

dY= -100;
function Menu() {
 Mouse.updPosition(scene); 
 dY+= dY > 0 ? 0 : 1;
 
 if (Mouse.Click && Mouse.onNode(newGame)) {
  newGame.color= 'white';
  SetActivEngine(Game);
 }
 
  if (Mouse.Click && Mouse.onNode(exitGame)) {
  exitGame.color= 'white';
  ExitGame();
 }
 
 scene.DrawTextOpt( 
                   170, 100+dY, // Позиция
                  'Rect Game', // Текст
                  'bold 30px sans-serif', // Шрифт (аналогично CSS)
                  'white', // Цвет текста
                  'green', // Цвед обводки
                  6 // Толщина обводки
                  );
                                   
                  
 newGame.setPosition(120, 200+dY);                   
 newGame.Draw(scene);

 exitGame.setPosition(370, 200+dY);                   
 exitGame.Draw(scene);
  
 scene.DrawText(90, 190+dY,  // Позиция
               'Новая игра'); // Текст
 scene.DrawText(350, 190+dY,  // Позиция
               'Bыход'); // Текст 
 
}

function GameOver() {
 Mouse.updPosition(scene); 
 dY+= dY > 0 ? 0 : 1;
 
 if (Mouse.Click && Mouse.onNode(newGame)) {
  newGame.color= 'white';
  SetActivEngine(Game);
 }
 
  if (Mouse.Click && Mouse.onNode(exitGame)) {
  exitGame.color= 'white';
  ExitGame();
 }
 
 scene.DrawTextOpt( 
                   170, 100+dY, // Позиция
                  'Game Over', // Текст
                  'bold 30px sans-serif', // Шрифт (аналогично CSS)
                  'white', // Цвет текста
                  'green', // Цвед обводки
                  6 // Толщина обводки
                  );
                                   
                  
 newGame.setPosition(120, 200+dY);                   
 newGame.Draw(scene);

 exitGame.setPosition(370, 200+dY);                   
 exitGame.Draw(scene);
  
 scene.DrawText(90, 190+dY,  // Позиция
               'Новая игра'); // Текст
 scene.DrawText(350, 190+dY,  // Позиция
               'Bыход'); // Текст 	
}


move= [];

move[0]= CreateSprite(
    0, 200, // Позиция в игре
    100, 100, // Размеры в игре
    anim    // Анимация
   );

move[1]= CreateSprite(
    400, 200, // Позиция в игре
    100, 100, // Размеры в игре
    anim    // Анимация
   );

me= CreateSprite(
    250, 180, // Позиция в игре
    100, 20, // Размеры в игре
    iPhone    // Анимация
   );

arr= []; count= 5;

for (var i=0; i<count; i+=1) {
 arr[i]= CreateSprite(
    Random(0, 450), -50, // Позиция в игре
    20, 20, // Размеры в игре
    apples    // Анимация
   );
 arr[i].speed= Random(1, 3);
}

speed= 4; score= 0; gameOverScore= 0;
function Game() {
 Mouse.updPosition(scene); 
 
 
  if (gameOverScore > 10)  {
   dY= -100;
   SetActivEngine(GameOver);
   gameOverScore= 0;
  } 
 
 
 if (Mouse.Click && Mouse.onNode(move[0])) {
  if (me.posX > 0) me.Move(-speed, 0); 
 }
 
 if (Mouse.Click && Mouse.onNode(move[1])) {
  if (me.posX+me.sizeX < scene.Canvas.width) me.Move(speed, 0); 
 }
  

 for (var i=0; i<count; i+=1) {
  
 if (arr[i].Collision(me)) {
  score+=1; speed+=0.2;
   arrNewPos(i);
 }  
  
  if (arr[i].posY > me.posY) {
   arrNewPos(i); gameOverScore+=1;
  }  
  
  arr[i].Move(0, arr[i].speed);
  arr[i].DrawAnimate(scene, 10);
 } 
 
 me.Draw(scene);
 
 scene.DrawTextOpt( 
                   5, 5, // Позиция
                  'Игровой счет: '+score, // Текст
                  'bold 25px sans-serif', // Шрифт (аналогично CSS)
                  'white', // Цвет текста
                  'green', // Цвед обводки
                  3 // Толщина обводки
                  );
                   
 move[0].Draw(scene, 1); move[1].Draw(scene, 2);
 
 dbg(gameOverScore);
}


function arrNewPos(_i) {
	arr[_i].setPosition(Random(0, scene.Canvas.width-arr[_i].sizeY), 
                     -Random(50, 300));
 arr[_i].speed= Random(2, 5);  
}


startGame(Menu, 30);
</script>

</body>
</html>

Разработка игры окончена. Осталось запустить ее на Android. Для этого я скачал и установил Intel XDK, прошел регистрацию, верифицировал данные, и создал новый проект. Передо мной открылось окно нового проекта.

Выбрал я пустой (blank) HTML5 документ, и сохранил проект.

После чего открыл его в файловом менеджере, и заменил все файлы в папке проекта WWW на свои, а там у меня всего одна папка с картиной, папка с движком и файл index.html, Intel XDK тут же подхватила этот файл и предложила мне открыть его для редактирования. Я его открыл и перешел в режим эмуляции:

Посмотреть

Все работает как надо, ничего не глючит.

Далее открыл вкладку с проектом и ввел необходимые данные, такие как версия программы, название, аписание, иконка и т.д. Заполнив все необходимые данные — я прошел с вежливого приглашения XDK во вкладку Build, и выбрал Build for Android, после чего мой проект выгрузился на сервер, откомпилировался, а система предоставела мне удобную ссылку для загруки уже готового apk файла.

С замиранием сердца я скинул его на гугл.Диск и открыл с телефона, и Чудо! Пошла установка приложения. Через пару секунд я уже во всю ловил яблочки айфоном в новоиспеченной игре.

Кстати, таким же образом я собрал еще одну игрушку (на том же J2ds)

Показать скриншот

J2ds GitHub

Любой желающий так же может скачать APK файл и протестировать ловлю яблочек айфоном: Скачать APK файл

А так же попрыгать в небольшой 2D игрушке по платформам и понаблюдать красивый задний фон: Скачать APK или Запустить и поиграть в браузере

Если запускаете в браузере, то работает опять же — и на компах и на планшетах/смарфонах.

Видео всей работы

Комментарии (12)

Skaner Автор
18.08.2015 21:10
#8541547
Небольшая просьба, если кто-то скачал APK и запустил, отпишитесь, работает ли, может какие баги есть?
1. AgentSmith
  18.08.2015 21:51
  #8541573
  +1
  в игре «за 1 час» всегда будут баги.
  Тут уж либо качество, либо скорость. Автор, как я правильно понимаю, выбрал скорость в ущерб качеству.
  1. Skaner Автор
    18.08.2015 22:00
    #8541579
    Таковы условия конкурса — игра строго за 1 час, главный критерий — чтобы уложиться по времени и чтобы она запустилась у жюри и не вылетела, пока они будут тестировать. Это лишь попытка сымитировать условия конкурса. Но у меня игра не вылетела… ни разу. И не заглючила.
    
    Delphinum
    18.08.2015 22:07
    #8541585
    +1
    А наличие различных движков и готовых решений не ограничивается условиями конкурса? То есть, написать игрушку «с нуля» за один час, это одно, а написать игрушку с использованием движка за один час, это другое.
    
    Skaner Автор
    18.08.2015 22:12
    #8541593
    Правилами на данный момент запрещено использование использование конструкторов.
    Движки запрещены лишь те, которые имеют функции автоматической сборки игры из уже готовых решений.
    Честно — я не совсем понимаю что значит функция автоматической сборки игры, но таким я точно не пользуюсь.
    
    Тем более разрешен Unity, а если он разрешен, то с этим точно можно. Хотя я с Unity не знаком, может и на нем можно за час сделать что-то играбельное.
    
    Delphinum
    18.08.2015 22:16
    #8541597
    +1
    За час можно и на ванильном JS сделать что-то играбильное, если соответствующим образом к этому подготовится.
    
    Skaner Автор
    18.08.2015 22:24
    #8541605
    +1
    Как вариант еще есть Lazarus и C++ (Qt), там развернуться можно по-круче, я думаю. Для Qt можно подключить Irrlicht, который я тоже рассматривал ранее, возможностей куча, но там глючный менеджер состояний стандартный, переход между уровнями или хотя бы между игровыми сценами за один час точно не сделаешь…
    И есть SoftPixel — но он настолько устарел, что боюсь, он не запустится сам по себе.
    Lazarus — там можно с 2D графикой работать без проблем, тем более кроссплатформенное решение, но я с ним мало знаком. Точнее именно с графикой. Я пробую, экспериментирую, но вот с J2ds на HTML5 получилось с первого раза, плюс практически полностью соблюдены условия конкурса (я про время).
    На самом деле очень страшно))) Раньше не участвовал в таком, волнуюсь ппц) И паникую, может зря даже)
    
    Главное ведь чтобы на Андроиде запустилось…

PapaBubaDiop
18.08.2015 21:43
#8541563
+4
Длина видео 1 час 18 минут, ага!!!
Не уложился…
1. Skaner Автор
  18.08.2015 21:47
  #8541569
  Это потому что много болтаю. А вообще в видео более подробно все разобрано. Но я стараюсь! Думаю с таким подходом смогу взять конкурс =) Главное, чтобы конкуренты не подхватили)))

CortexDeveloper
18.08.2015 23:25
#8541645
Статья хороша тем, что автор в живую все показывает + ограничение в 1 час заставляет думать «нестандартно».
Спасибо, хотелось бы больше постов подобной тематики.

Invision70
19.08.2015 04:30
#8541729
+4
>>> На поле есть айфон, который ловит падающие яблочки от Эппл.
Приложение на андроид. Эпично)

TheRabbitFlash
19.08.2015 10:02
#8541829
+2
>>> Все работает как надо, ничего не глючит.

Это пока игра состоит из 2х кнопок :)

Написать игру для Android за 1 час. Реально? +2

Комментарии (12)

Skaner Автор

AgentSmith

Skaner Автор

Delphinum

Skaner Автор

Delphinum

Skaner Автор

PapaBubaDiop

Skaner Автор

CortexDeveloper

Invision70

TheRabbitFlash