2l4u.ru Dress up! Создание игры - одевалки

Creating your own dress up game movie is here http://2l4u.ru/program_495.php
Demo file of this lesson is here: http://2l4u.ru/program_492.php

Для создания игры-одевалки нам понадобиться:

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

Сразу почему-то на ум приходит фильм "Покровские ворота" - "Я вся такая - неловкая... угловатая"
Ну, да ладно. Вы можете использовать свой рисунок или улучшить мой с помощью бесплатной, ещё пока, программы InkScape.
Скачать рисунок в формате PNG можно отсюда
Скачать рисунок в формате SWG можно отсюда

Удивительная программа Inkscape находится здесь: http://inkscape.org/

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

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

После создания проект откроется сцена:

Загружаем картинку нашей, ну или, Вашей модели.
Модель можно расположить по центру и нажать на кнопку - "save stage" - сохранить сцену.

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

После этого откроется список сцен. У нас одна сцена, у неё нужно изменить параметры.
Для этого нажмём на шестерёнку

Откроется окно параметров. Ширину можно чуть-чуть увеличить до 800 пикселей, а высоту сделать 520 или 560

Жмём "Изменения параметров".
Теперь нам нужно вернуться на сцену, нажимаем значёк  "карандаш"

Теперь можно загрузить одежду.
Одежду можно скачать отсюда http://2l4u.ru/pub/_girl_1_clouses.zip
Или, если хотите доработать в формате svg отсюда http://2l4u.ru/pub/_all_dress.svg

Если мы запустим проект - нажмём "Пуск" или "run stage", мы заметим, что одежда не перетаскивается.
Для того, чтобы задействовать эффект перетаскивания нам нужно дополнить проект библиотекой.

1. Скачиваем скрипт для реализации функции drag-n-drop (перетаскивания) здесь http://2l4u.ru/pub/jquery.easydrag.handler.beta2.js

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

3. Находим  скаченный файл и загружаем.
4. Когда файл появится в списке "Пользовательские скрипты" переходим во вкладку "Объекты"

Теперь мы можем реализовать функцию перетаскивания присвоив любому нашему объекту свойство "easydrag"

Как это сделать.

Я уже говорил, что существуют 4 типа объектов. То, что мы загрузили объекты актёры.
Чтобы нам не открывать каждый, и не присваивать ему свойство можно создать объект типа "Контроллер" и присвоить свойства всем, используя этот объект.

1. Открываем вкладку объекты. Создаём объект контроллер

2. Открываем вкладку "События объекта"

3. Добавляем событие "Create" , а в событие "Create" добавлем действие "blank script" - пустой сценарий

4. Теперь открываем "blank script" на редактирование

5. Нажимаем на каждый объект, кроме объекта "the girl" и добавлем
 фразу .easydrag();

Должно получиться:

$("#object_8").easydrag();
$("#object_7").easydrag();
$("#object_6").easydrag();
$("#object_5").easydrag();
$("#object_4").easydrag();
$("#object_3").easydrag();
$("#object_2").easydrag();

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

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

Во второй части я расскажу один из способов сохранения результата