Как помирить художника и программиста. 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

Управляем SVG сценой из 2l4u.ru

Просмотреть демо можно здесь - SVG Stage Hero Move


Есть такой удивительный и интересный формат SVG.
Задуман он, как векторная графика для интернета. Очень амбициозно, но сейчас не об этом.
Хочу напомнить, что векторная графика в отличии от растровой формируется не с помощью точек, а на основе линий и геометрических фигур.
Растровую нельзя масштабировать, коды растровой графики проигрывают по объёму. Если речь идёт о мультяшных изображениях, то векторная графика выигрывает по всем направлениям.
Все браузеры интернета распознают преимущественно 3 формата - PNG, GIF, JPG
Формат svg распознают не все. Internet Explorer славится традиционным малораспознованием чего-либо, но ситуация начинает меняться в лучшую сторону. Есть слухи, что майкрософт присматривается к HTML 5 Canvas, может быть и SVG начнёт поддерживать?

Отвлёкся.
Итак. Сцену SVG легко создать с помощью InkScape.

Задумка такая. Создавая игровой проект, очень удобно, когда художники занимаются своими делами, а программисты своими, при этом работают на некой общей основе.
Этой основой вполне  может стать сцена SVG.
Т.е. программисты рисуют сцену, создают уровень, героев; а программистам остаётся оживить сцену с помощью программ.

Как этого достичь?

Для данного урока нам понадобится SVG сцена.

Взять её можно отсюда: http://2l4u.ru/pub/graphics/swg/fish_2.svg


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

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

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


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

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

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

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

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

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

Откроем сцену fish_2.svg с помощью текстового редактора
Выделим всё, скопируем и вставим в Редактор Параметров События Объекта

Если нажмём Сохранить и, потом,  ПУСК, то загрузится SVG - сцена с рыбкой.
Но нам нужно управлять сценой.

Для этого дописываем ниже сл. код

<script>
$(document).ready(function() {
// находим SVG сцену - можно посмотреть id в файле в тэге svg
var svg = document.getElementById("svg5247");
// запускаем класс для работы с SVG
var pottis = new Pottis(svg);
// добавляем действие
pottis.addDrag(fish1);
 });
</script>

Нажимаем сохранить.

5. Вы наверно заметили, что появилось нечто новое - класс Pottis.
Да, нам нужно добавить библиотеку в список сценариев:
Библиотеку Pottis можно взять отсюда http://2l4u.ru/pub/js/pottis.js

Теперь, открываем вкладку "Основные сценарии"
И загружаем файл pottis.js

Теперь нажимаем Пуск.
Загрузится SVG сцена с рыбкой. Рыбку можно двигать!

Если у Вас, что-то не получилось, Вы можете добавить проект по работе с SVG сценой в список своих проектом - он открыт для копирования SVG Stage Hero Move - автор maosi
Просмотреть демо можно здесь - SVG Stage Hero Move

Тестирование Jquery он-лайн

Если у вас нет под рукой веб-сервера для тестирования Jquery или Java Script. Можно воспользоваться 2l4u.ru


1. Входим в систему.
2. Создаём новый проект.

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

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

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

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

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

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

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

Теперь в редактор можно поместить код Jquery / JavaScript, например функцию выравнивания объектов по центру

function place_in_center(obj){

var obj_width=$(obj).width();


var obj_height=$(obj).height();


$(obj).css("left","50%");


$(obj).css("margin-left",-1*(obj_width/2));


$(obj).css("top","50%");


$(obj).css("margin-top",-1*(obj_height/2));
}

place_in_center("#dialog_1");

place_in_center("#dialog_2");

place_in_center("#dialog_3");





Нажимаем сохранить

5. Теперь добавляем в контроллер событие STAGE START, в STAGE START добавляем blank script
Открываем blank script и вставляем страницу над которой будем осуществлять описанное выше действие:

<div id="dialog_1" style="position: absolute; background: #cc6600; width: 700px; height: 350px; border: solid #000000 4px; padding: 4px;">

 <!-- содержимое диалога -->

Frame 1

</div>

<div id="dialog_2" style="position: absolute; background: #ff33cc; width: 600px; height: 300px; border: solid #000000 2px; padding: 4px;">

 <!-- содержимое диалога -->

Frame 2

</div>



<div id="dialog_3" style="position: absolute; background: #336699; width: 500px; height: 250px; border: solid #000000 1px; padding: 4px;">

 <!-- содержимое диалога -->

Frame 3
</div>

Нажимаем "Сохранит ", закрываем окно Свойств. Нажимаем "Пуск"

OnLine Paint

Создана простая он-лайновая рисовалка на основе технологии HTML 5.
Рисовалка находится по адресу http://2l4u.ru/program_516.php
Программа позволяет выбирать цвет, менять фон, сохраняет "шедевр" на сервере, который можно сохранить на компьютер и разместить в сети

Создание объектов на лету с помощью HTML5

Attention. First lesson presentation in english available here
It's not just the same. No objects are uploded!
All game objects are created dynamicaly.
Program lising of dymamic object is in the end of this lesson
Similar demo is here http://2l4u.ru/program_513.php

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

1. Входим в систему.
2. Создаём новый проект.

3. В уроке 1 - здесь - Мы загружаем в проект небольшой рисунок:

для этого в окне сцены нужно нажать на кнопку Upload и указать путь к файлу...

Теперь мы не будем это делать, а создадим объект динамически.

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

В окне свойств нам нужно добавить событие Create - создание. Это событие
 стартует в начале игры. И это именно то, что нам нужно. Вообще есть два самых важных события - Step - Шаг - событие, которое обновляется через равные промежутки времени (по умолчанию 25 миллисекунд) и Событие Create - которое не обновляется, хотя функции могут работать или до своего завершения или в течения всей игры. Событие Шаг (Step) используется для дополнительной проверки состояний игровых объектов... например, можно проверить номер кадра в спрайте, или расстояние между объектами, или произошло ли столкновение объектов...

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

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

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

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

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

Сейчас немного теории. Все объекты это слои, т.е. - тэги div.
И слой, обычно, бесцветный и прямоугольный, а нам нужен круг.
Теперь, мы подошли в плотную к использованию технологии HTML 5 в нашей игре.
Вместо слоя мы добавим   холст - Canvas

Это делается так:

$("#contnt").append('<CANVAS id="canv_1" width="30" height="30"></CANVAS>');

Метод append добавляет объект  с идентификатором "canv_1" к нашей сцене с размерами 30 на 30 пикселей.
Теперь можно нарисовать что-нибудь  на нашем холсте добавим ниже:

 var canvas = document.getElementById("canv_1");
  if (canvas.getContext)
    {
   //создаём переменную для работы с 2d контекстом - создаём форму для фигуры
   var ctx = canvas.getContext("2d");
   //определяемся с цветом заливки фигуры
 ctx.fillStyle = "red";
  // рисуем фигуру "арка", от центра (15 пикселов x,y (внутри Canvas))
  // Math.PI*2 - делаем полный поворот дуги, чтобы получился круг
 // двигаемся по часовой стрелке - true
 ctx.arc(15,15,14,0,Math.PI*2,true);
 // обводка чёрная
 ctx.strokeStyle = "#000000";
 // заполняем фигуру
 ctx.fill();
// размер линии
 ctx.lineWidth = 1;
// рисуем линию
 ctx.stroke();  
    }

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

// положение объекта должно быть абсолютным, чтобы он мог перекрывать другие объекты,
// если это потребуется
$("#canv_1").css("position","absolute");
// расставляем на сцене
$("#canv_1").css("left","200px");
$("#canv_1").css("top","200px");
$("#canv_1").css("cursor","pointer");
// присваиваем событие клик объекту
// определяем положение добавляем 50 пикселей
// двигаем по оси x
$("#canv_1").click(function(){   
var x=get_obj_x("#canv_1");
x=x+50;
$("#canv_1").animate({left:+x+"px"},500,function(){});   
});


Теперь нажмём "Сохранить".
Далее, закроем все окна и нажмём "Пуск" или "run game"

Когда запустится наша игра, курсор при наведении на шарик(canv_1) будет меняться

При нажатии на шарик - (canv_1) он будет  двигаться направо.

Еще раз хочу привести весь листинг, который нужно скопировать и вставить в "editor window"

$("#contnt").append('<CANVAS id="canv_1" width="30" height="30"></CANVAS>');
 var canvas = document.getElementById("canv_1");

  if (canvas.getContext)

    {

   //создаём переменную для работы с 2d контекстом - создаём форму для фигуры

   var ctx = canvas.getContext("2d");

   //определяемся с цветом заливки фигуры

 ctx.fillStyle = "red";

  // рисуем фигуру "арка", от центра (15 пикселов x,y (внутри Canvas))

  // Math.PI*2 - делаем полный поворот дуги, чтобы получился круг

 // двигаемся по часовой стрелке - true
 ctx.arc(15,15,14,0,Math.PI*2,true);

 // обводка чёрная
 ctx.strokeStyle = "#000000";
 // заполняем фигуру

 ctx.fill();

// размер линии
 ctx.lineWidth = 1;

// рисуем линию
 ctx.stroke();
    }

$("#canv_1").css("position","absolute");
$("#canv_1").css("left","200px");
$("#canv_1").css("top","200px");
$("#canv_1").css("cursor","pointer");

$("#canv_1").click(function(){  
var x=get_obj_x("#canv_1");
x=x+50;
$("#canv_1").animate({left:+x+"px"},500,function(){});  
});


Удачи!
Шарик можно раскрасить поинтересней, с помощью градиентов и теней сделать  объёмным
Как это сделать расскажу позже

Создаём HTML5 PaintBrush

Attention. First lesson presentation in english is available here
Almost the same.
You have to  create text type object, name it as text01, insert it into stage
And change program code in the end of the list.
It makes the cursor draw if A-key pressed, and cleanes canvas when S-keys press.

demo is here http://2l4u.ru/program_507.php

На самом первом уроке, хочется рассмотреть обязательные шаги необходимые при создании игры с помощью сервиса 2l4u.ru

1. Входим в систему.
2. Создаём новый проект.

3. Открываем вкладку Объекты и создаём объект "text01"

4. Теперь открываем вкладку Сцена
Открываем сцену на редактирование

Теперь нужно вытащить объект text01 на сцену

5. После этого находим Контроллер "ctrl"
Нажимаем на шестерёнку и вызываем окно свойств

В окне свойств нам нужно добавить событие Create - создание. Это событие
 стартует в начале игры. И это именно то, что нам нужно.

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

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

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

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

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

В секции "editor window" копируем следующий код:

//insert CANVAS tag into the game field
$("#contnt").append('<CANVAS></CANVAS>');
// mode toggle variable
var draw=0;

// 2d contest handler
var canvas = document.querySelector("canvas"); 
// obj1 of 2d contest
var holst = canvas.getContext("2d");

canvas.width=screen_width; 
canvas.height=screen_height;

// work with keyboard
$(document).keydown(function(n) {
switch (n.keyCode){
 // A letter key
case 65:
my_obj_1.fillStyle="#ffffff";
draw=draw+1;
$("#text01").html("PB draw :: Press A to Stop :: Press S to Clear");
if (draw>1){
draw=0;
$("#text01").html("PB don't draw :: Press A to Draw :: Press S to Clear");
}
   break;

// S letter key
case 83:

holst.fillStyle="black"; 
holst.fillRect(0,0,canvas.width,canvas.height);

break;

}
});


// canvas field

holst.fillStyle="black"; 
holst.fillRect(0,0,canvas.width,canvas.height);

// brush

var rect_width=5;
var rect_height=5;
var my_obj_1 = canvas.getContext("2d");
my_obj_1.fillStyle="#ffffff";

// work with mouse

$("#contnt").mousedown(function() {
my_obj_1.fillStyle="#ffffff";
my_obj_1.shadowColor = '#00ffff';
my_obj_1.shadowBlur = 10;
draw=1;
});
$("#contnt").mouseup(function() {
draw=0;
});

 
  var mouse_y;
  var mouse_x;

// calculate mouse position for the brush
   $(document).mousemove(function(e){
  
   mouse_y=e.pageY;
   mouse_x=e.pageX;
 
if (draw==1){
 

  my_obj_1.fillRect(mouse_x,mouse_y,rect_width,rect_height);
   x=mouse_x;
   y=mouse_y;
}

}); 

// decoration for the status text

$("#text01").css("background","#ffd700");
$("#text01").css("border","1px    solid    #110f00");
$("#text01").css("padding","3px");
$("#text01").css("cursor","pointer");
$("#text01").css("left","3px");
$("#text01").css("top","3px");
$("#text01").css("width",(screen_width-12));
$("#text01").css("height","20px");

$("#text01").html("PB: don't draw :: Press A to Draw :: Press S to Clear");



Теперь нажмём "Сохранить".
Далее, закроем все окна и нажмём "Пуск" или "run game"

Когда запустится наша игра, при нажатии клавиши A- программа будет переключаться между режимами рисования и "нерисования", S-будет стирать нарисованный рисунок