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