вторник, 21 июля 2015 г.

Java и Создание Игр центрируем окно

Он-лайн Конструктор Игр 2L4U.RU

воскресенье, 27 апреля 2014 г.

HTML 5 Движение фона

 Для того, чтобы сделать фон HTML 5 движущимся, можно воспользоваться следующим рецептом.
Сначала создадим HTML5 канву (или холст).
А затем с помощью не хитрых манипуляций с бесшовной картинкой создадим эффект бесконечного движения

<canvas id="canvas" height="310" width="600">
    Your browser do not support HTML5
</canvas>

<script type="application/javascript">
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext('2d');

// cоздаём объект для манипуляции с картинкой

    img1 = new Image();
// указываем путь к картинке
    img1.src = "allpics/1398564837.png";
 
// начальная координата картинки    
    var x1 = 0;
// начальная координата скопированной картинки = размеру картинки
    var x2 = img1.width;
// шаг   
 var v = -1;

// cоздаём функцию, которую будет вызывать setInterval

    function movebg() {
    // инициализируем содержимое конвы     
     ctx.clearRect(0, 0, canvas.width, canvas.height);
    // изменяем координаты в соответствии с шагом  
        x1+=v;
        x2+=v;
 // если первая координата стала больше картинки - инициализируем координаты и шаг
        if (x1<(-1*img1.width)) {
         x1 = 0;
         x2 = img1.width;
         v = -1;
            }
   // 2 раза помещаем в канву картинку со сдвигом равным  x1 и x2  
        ctx.drawImage(img1,x1,0);
        ctx.drawImage(img1,x2,0);
      
    }

// запуск функции через 25 миллисекунд

   setInterval(movebg, 25);

</script>

Пример можно посмотреть здесь : http://2l4u.ru/pubfiles/64/1360/

четверг, 12 сентября 2013 г.

Мне кажется, чтобы игры нормальные создавать нужно реально "больным" на эту тему быть, а если такого нет - не стоит заморачиваться.


Java Script и разработка игр

Когда-то Javascript назвали самым недооценнённым языком. С тех пор прошло много времени, и если взглянуть на количество различных фреймворков написанных с использованием Javascript, можно сказать, что оценили Javascript достаточно высоко.

Само-собой разумеется, если есть язык программирования, рано или поздно, кто-нибудь обязательно попытается использовать его для создания игры.
И хотя игры бывают разные для любой среднестатистической игры требуются следующие функции:
1. Управление графикой : создание из картинок спрайтов, управления фреймами спрайтов, обновление графики на экране;
2. Вычисления: определение координат графических объектов, определение их размеров, определение столкновений, пересечений и наложений объектов;
3. Манипуляции с графическими объектами: перемещения объектов, повороты, появления, исчезновения, замена одних объектов другими;
4. Работа со звуком;
5. Сохранение промежуточных результатов и состояний;
6. Управление уровнями

В Javascript есть функции, которые можно приспособить для выполнения этих операций, а при использовании некоторых готовых классов (например Jquery) реализация описанных выше пунктов значительно упрощается.

А для того, чтобы процесс создания игры с использованием Javascript был более контролируемый я написал небольшой сервис, который скромно назвал: 2L4U.RU

Основной трудностью при создании игр на Javascript, на мой взгляд является сложность управления большим количеством разнообразных по применению объектов. Игровой проект может включать в себя различные библиотеки (тот же Jquery) , картинки создающие фон, картинки фреймов спрайтов, звуки, 3d мэши, текстуры или SVG-сцены.

Не очень приятно, когда приходится тратить время для того, чтобы каждый раз, при создании игры начинать копировать всё это вместо того, чтобы сразу приступать к моделированию игрового поля, наполнению игры картинками, и программированию поведения.

Поэтому и родилась идея создания сервиса, на котором эти операции выполнять будет не нужно. А процесс создания спрайтов для игровых объектов упростить до минимума. Т.е. для того, чтобы создать анимированный спрайт ползователю нужно будет всеголишь загрузить набор картинок.

Так появились страница управляющая игровыми проектами – для того, чтобы пользователь, зарегистрированный на сайте мог управлять сразу несколькими проектами – делать несколько игр.

Для управления спрайтами появилась страница "спрайты", где спрайты можно создать из набора картинок или загрузить сразу архив, в котором картинки должны быть помечены цифрами, чтобы обеспечить правильную смену фреймов в спрайте (1.png – 1-й фрейм, 2.png – 2-й фрейм, 3.png – 3-й фрейм, и так далее). Некоторые дополнительные функции позволяют копирповать спрайт, отражать, поворачивать спрайт, а так же делать страйп - полоску из кадров. Это было специально для того, чтобы использовать фреймворк Spritely

Собственно спрайты это картинки, для того, чтобы их вывести на экран были предусмотрены игровые объекты – так появилась страница Объекты

Наконец для расстановки объектов нужна сцена. Так появилась страница управления сценой. В игре может быть несколько сцен. Может понадобиться переключения между сценами. Я добавил эту возможность.

Что из себя представляет сцена на физическом уровне – это HTML страница, которая вставляется в iframe

Редактор сцены позволяет расставлять созданные объекты- героев, текты, фоны и т.п. Создавать слои – если игровых объектов много, наконец загружать картинки непосредственно в сцену.
Редактор сцены позволяет изменять свойства объектов их глубину или поменять спрайт.
Редактор сцены позволяет присваивать объектам поведение, достаточно щёлкнуть по иконке в виде шестерёнки и появляется окно редактора поведения.
Вот когда начинается программирование на Javascript

Для того, чтобы процесс программирования не был сильно сложным, я включил во все проекты несколько предустановленных фреймворков: Jquery (для управления анимацией), Jquery-Timers (для обновления состояний графических объектов) и несколько собственных пользовательских функций, которые мне показались полезными.
Например: функцию генерирования случайного числа, функцию определения координат объекта, функцию определения столкновения объектов и т.д.

Для того, чтобы поведение было логичным я использовал парадигму событие – действие. Например. Есть событие "Один Раз, В Начале Игры" – это означает, что код будет запущен одлин раз на страрте. Есть событие "Постоянно, Во Время Игры" – это означает, что код будет запускаться через равное кол-во миллисекунд в течении всей игры.

Основное действие которое запускают события - пользовательская программа

Я конечно планирую создать больше событий и действий, но для создания полноценных игр хватает.

Ну, например, : в событие "Один Раз, В Начале Игры" можно добавить код, который будет слушать пользовательский ввод, напрмер клавиши AWSD – и привязать к ним событие объекта – например анимацию.

В событие "Постоянно, Во Время Игры" я втсавляю проверку столкновения.

Таким образом, любой объект на сцене можно использовать и для вывода изображения и для привязки к нему кода – управляющего его поведением или поведением других объектов.

Когда стало понятно, что помимо стандартных фреймворков понадобиться использовать любые другие появилась страница "Сценарии" . Это помогло, например, для создании игры "SVG – Fashion," где используются сценарии для управления SVG с помощью Javascript.


Когда игровой проект завершён его можно послать на публикацию, можно получить ссылки на iframe и вставить Вконтакт, или скачать архив, разместить на собственном хостинге.

Последнеее предпочтительнее, потому что мой сервер пока несильно шустрый.

Когда игровой проект завершён им можно поделиться с другим пользователем, который может, например, создать совй уровень или изменить сюжетную линию, что угодно.

понедельник, 17 июня 2013 г.

Космическая игра - часть 1 Генератор звёздного неба



Добрый день. HTML 5 потрясающие возможности для реализации художественных замыслов на стыке математики, программирования и дизайна. Нельзя обойти эту технологию стороной при разработке игр, нельзя...

Итак, подумал я как-то, что здорово было бы создать программу, которая бы генерировала звёздное небо.

Звёздное небо можно нарисовать с помощью отдельных точек размером в 1 пиксел. Далее, можно было бы  задать для каждой точки свой цвет. Мерцание можно эмитировать изменением размера точки на 2-3 пиксела в случайном порядке, для отдельных точек.




1.Создадим новый проект  http://2l4u.ru/gamecreator.pia




2. Откроется сцена - окно игры, которую мы создаём

3. Теперь нам нужно создать два события: событие "STAGE START" и событие "Create".
В "STAGE START" можно помещать HTML - код.
В событие  "Create", "Step" только Jquery / Java Script
Таким образом, в "STAGE START" мы можем разместить код HTML5.


4. Для этого, можно использовать объект контроллер - ctrl
Конечно, мы можем создать свой объект, но контроллер ctrl присутствует по умолчанию
Нажимаем на шестерёнку и вызываем окно свойств




Итак, добавляем событие STAGE START

Выбираем "STAGE START" из списка


Результатом, действием на это событие добавим "blank script"



теперь откроем blank script - чистый скрипт на редактирование...



Откроется окно Редактор событий


Теперь вставим код:



<script>
// Эта функция генерирует случайной число в заданных приделах
function getRandomInt(min, max)
{
 return Math.floor(Math.random() * (max - min + 1)) + min;
}

// размер экрана звёздного неба
var screen_width=765;
var screen_height=430;

// кол-во звёзд
var all_stars=getRandomInt(50, 1000);
// начальные координаты "звёздного неба"
var start_x=0;
var start_y=0

// массивы для хранения данных о звёздах
// эти массивы нам нужны, чтобы одновременно передвигать звёзды
// создавать иллюзию движения

stars_array_ids = new Array();
stars_array_ids_x = new Array();
stars_array_ids_y = new Array();
stars_array_ids_color = new Array();
stars_array_ids_type = new Array();



// функция для преобразования числовых данных в формат цвета
function rgb2hex(r,g,b)
{
  return Number(r).toString(16).toUpperCase().replace(/^(.)$/,'0$1') +
         Number(g).toString(16).toUpperCase().replace(/^(.)$/,'0$1') +
         Number(b).toString(16).toUpperCase().replace(/^(.)$/,'0$1');
}

// загрузка страницы

$(document).ready(function(){

// задаем параметры элементу CANVAS с id = "canv_1"

$("#canv_1").css("width",screen_width);
$("#canv_1").css("height",screen_height);

// получаем 2d контекст на котором и будем рисовать
var canvas = document.getElementById("canv_1");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
}


// наполняем массивы - генерируем характеристики звёзд

for(i_temp=0;i_temp<all_stars; i_temp++){
 //sum += a[i];
 stars_array_ids[i_temp] = '"stars_'+i_temp+'"';
 stars_array_ids_y[i_temp] = getRandomInt(-1*screen_height,screen_height);
 stars_array_ids_x[i_temp] = getRandomInt(0,screen_width);
 stars_array_ids_color[i_temp] =('#'+rgb2hex(getRandomInt(1,255),getRandomInt(1,255),getRandomInt(1,255)));
 stars_array_ids_type[i_temp] = getRandomInt(0,50);

}



// создаём функцию рисования звёздного неба
// эта функция будет вызываться через равные промежутки времени

function draw_move_stars(){
// заполняем экран чёрным фоном
ctx.fillStyle="black";
ctx.fillRect(0,0,screen_width,screen_height);

// получаем характеристики для рисования на холсте
  for(i_temp=0;i_temp<stars_array_ids.length;i_temp++){

  var x=stars_array_ids_x[i_temp];
  var y=stars_array_ids_y[i_temp];
  var color=stars_array_ids_color[i_temp];
  var type= stars_array_ids_type[i_temp];

  y=y+1;
  if (y>screen_height){
   y=-screen_height;
  }
  stars_array_ids_y[i_temp]=y;
 
   ctx.shadowColor = "blue";
   ctx.shadowBlur = 5;
   ctx.fillStyle =color;

  if (type==0){
  ctx.fillStyle =('#'+rgb2hex(getRandomInt(100,255),getRandomInt(100,255),getRandomInt(100,255)));
  }

  var razm_x=getRandomInt(1,2);
  var razm_y=getRandomInt(1,2);

  if (type==0){
  ctx.fillRect(x,y,razm_x,razm_y);

  } else {
  ctx.fillRect(x,y,1,1);
  }

// после того, как мы нарисовали звёзды - сбрасываем параметры холста
 ctx.restore();


 }


 }

var i_time=0;

// теперь создаём функцию, которая будет вызывать себя
//  функцию draw_move_stars через равные промежутки времени - 50 миллисекунд

function  move_stars() {
// увеличиваем значение счётчика
  i_time++;
// через 1000 миллисекунд вызывает - second_passed - себя
  setTimeout(move_stars, 50);
  draw_move_stars();
}

 move_stars();





});

</script>
</head>
<body>
<CANVAS id="canv_1" width="765" height="430"></CANVAS>

</body>

</html>

2. Нажимаем сохранить, закрываем редактор событий. Жмём Пуск

результат можно посмотреть здесь http://2l4u.ru/program_740.php

четверг, 28 февраля 2013 г.

Как помирить художника и программиста. SVG рыба

Начал, однажды, делать вот такое демо http://2l4u.ru/play_game_543.php



, и понял, что примирить художника и программиста можно.


Программист и художник смотрят на игру разными глазами.
Художник видит цвета, формы, переходы, эффекты, мультипликацию
Программист видит загрузки, бинарные файлы, утечки памяти, задействованные сценарии, буферы для временных данных, классы, процедуры, переменные...
Они живут в разных мирах периодически устраивая бессмысленный и беспощадный холивар...

Художник отвечает преимущественно за игровой уровень. За внешний вид героев и сцены

Программист за оживление этого уровня, реализацию управления игрой, за ходом игрового сюжета

Они существуют на разных уровнях и для всех спокойнее, когда они не пересекаются по пустякам.

Поэтому для того, чтобы они могли существовать продуктивно, я подумал, что можно им это устроить.


SVG начал разрабатываться очень давно. В 1999 году. Его делали, делали. Потом снова делали. Делали программисты многих компаний. Поэтому накопилось немало решений дляпостроения графики. Появился очень интересный редактор InkScape, который рисует svg - графику. Есть промышленные программы для построения схем. Схемы получаются высоко информативные. Есть географические карты...

Меня SVG интересует по следующим причинам. Картинки в InkScape получаются стильными,  мультяшными, но можно сделать и очень приближенными к реальности.
Так как у SVG предок XML, с архитектурой DOM полный порядок. Теоретически из Java Script можно управлять любой линией.
И ещё один штрих. Даже Майкрософт анносировала поддержку SVG в 9-й версии браузера.

Отвлёкся от основной темы, извините.

Итак нам нужно организовать работу и художника над одним проектом одновременно, но так чтобы они друг-другу не мешали.

Сделать это не сложно.

Можно организовать работу в разных событиях. Художник будет загружать версии игрвого уровня в событие STAGE START.
Программист будет работать с событиями Create и Step.



1.Создадим новый проект  http://2l4u.ru/gamecreator.pia




2. Откроется сцена - окно игры, которую мы создаём

3. Теперь нам нужно создать два события: событие "STAGE START" и событие "Create".
В "STAGE START" можно помещать HTML - код.
В событие  "Create", "Step" только Jquery / Java Script
Таким образом, в "STAGE START" мы можем разместить код SVG сцены.


4. Для этого, можно использовать объект контроллер - ctrl
Конечно, мы можем создать свой объект, но контроллер ctrl присутствует по умолчанию
Нажимаем на шестерёнку и вызываем окно свойств




Итак, добавляем событие STAGE START

Выбираем "STAGE START" из списка


Результатом, действием на это событие добавим "blank script"


 
теперь откроем blank script - чистый скрипт на редактирование...



Откроется окно Редактор событий


Скачаем сцену отсюда, http://2l4u.ru/pub/graphics/swg/fish_3.svg (сцена нарисована в InkScape)
Откроем сцену fish_3.svg с помощью текстового редактора.
Например с помощью Notepad++. Скачать "НоутПад++" можно бесплатно отсюда:
 http://notepad-plus-plus.org/

Откроем сцену, выделим всё, скопируем и вставим в Редактор Параметров События Объекта, в поле "editor window"

Нажмём Сохранить.Это событие художника. Художник может в любой момент зайти в проект и поменять сцену в событии STAGE START на новую версию

Теперь нам нужно, создать события в которых будет работать программист.

Но сначала модернизируем глобальные настрйки проекта, чтобы он мог работать с SVG
Для этого откроем вкладку "Основные сценарии"
и загрузим последовательно несколько библиотек необходимых для работы с SVG

jquery.svg.js
jquery.svgdom.js
jquery.svganim.js

скачать их можно отсюда:

http://2l4u.ru/pub/jquery_svg/jquery.svg.js
http://2l4u.ru/pub/jquery_svg/jquery.svgdom.js
http://2l4u.ru/pub/jquery_svg/jquery.svg.js



Теперь добавляем в контроллер событие "Create " (Точно также как описано выше, только вместо STAGE START нужно выбрать Create)
Добавляем в событие "Create" действие "blank script"
Открываем на редактирование "blank script"


Откроется окно Редактор событий




Втсавляем в событие Create код:

var fish_go_left=0;
var fish_go_right=0;
var fish_speed=4000;
$("#fish02").animate({svgOpacity: 0}, 25);
//var x=get_obj_x("#fish1");
//alert(x);
$("#fish02").animate({svgTransform: 'translate(500, 0)'},fish_speed);
$("#fish1").animate({svgTransform: 'translate(500, 0)'},fish_speed,function(){
//x=get_obj_x("#fish1");
//alert(x);
fish_go_right=1;
});

Нажимаем сохранить. Теперь добавляем событие "Step" - шаг
Добавляем в шаг "blank script" открываем на редактирование
Втавляем в событие код:


if (fish_go_right==1){
fish_go_right=2;
$("#fish1").animate({svgOpacity: 0}, 75);
$("#fish02").animate({svgOpacity: 1}, 75);
$("#fish02").animate({svgTransform: 'translate(-450, 0)'},fish_speed);
$("#fish1").animate({svgTransform: 'translate(-450, 0)'},fish_speed,function(){
//x=get_obj_x("#fish1");
//alert(x);
fish_go_right=0;
fish_go_left=1;

});
}
if (fish_go_left==1){
fish_go_left=2;
$("#fish1").animate({svgOpacity: 1}, 75);
$("#fish02").animate({svgOpacity: 0}, 75);
$("#fish02").animate({svgTransform: 'translate(500, 0)'},fish_speed);
$("#fish1").animate({svgTransform: 'translate(500, 0)'},fish_speed,function(){
fish_go_right=1;
fish_go_left=0;
});
}

Нажимаем сохранить.
Закрываем все окна.
Нажимаем "Пуск"

Если у Вас, что-то не получилось. Вы можете скопировать проект SVG Fishes - он в списке открытых проектов справа, автор vasya. Для того, чтобы скопировать в список своих проектов достаточно нажать на изогнутую жёлтую кнопку.
После этого, проект нужно ативировать и посмотреть события и коды объекта ctrl




Официальный сайт проекта Jquery-SVG
http://keith-wood.name/svg.html