Управляем 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