понедельник, 11 февраля 2013 г.

first lesson (самый первый урок)

Attention. First lesson presentation in english available here 

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

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



3. Загружаем в проект небольшой рисунок, я выбрал вот этот:
для этого в окне сцены нужно нажать на кнопку Upload и указать путь к вашему файлу




4. Теперь двигаем объект куда нам нужно на сцене... нажимаем Save Stage - сохраняем положение

5. Нажимаем на шестерёнку и вызываем окно свойств

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

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

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

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


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

Справа в списке объектов найдём наш объект object_1. В секции "editor window" появится надпись: $("#object_1")

Допишем:
$("#object_1").css("cursor","pointer");
Теперь нажмём "Сохранить".
Далее, закроем все окна и нажмём "Пуск" или "run game"

Когда запустится наша игра, курсор при наведении на шарик(object_1) будет меняться...
-Так себе достижение! - скажет кто-нибудь. И будет не совсем прав, потому что мы только начали и добились того, что любое свойство CSS может быть присвоено объекту.

Снова откроем blank script на редактирование...

Теперь посмотрим на секцию ниже "editor window" - Список доступных функций

Найдём
"Событие нажатие на объект, для сл. типов: Актёр, Текст"
и нажмём на текс ниже
$(obj).click(function(){\t\n//insert_code_here\t\n});

Данные три строки будут добавлены в "editor window", в позицию курсора
$(obj).click(function(){   
//insert_code_here   
});

Это функция нажатия. Нужно сменить obj на "#object_1" и функция готова к работе:

$("#object_1").click(function(){   
//insert_code_here   
});

Однако, эта функция ничего не запускает, нужно срочно изменить ситуацию, тем более, что надпись //insert_code_here   - нас этому призывает
Эту надпись можно удалить и снова пролистать "Список доступных функций".

Найдём строку: "Эффект затемнения, для сл. типов: Актёр, Текст"
Нажмём надпись: $(obj).fadeOut(time_to_fadeout);
Заменим obj на имя нашего объекта "#object_1" и установим время затемнения - 2000 миллисекунд.
У нас должна получится такая строка:
$("#object_1").fadeOut(2000);

А весь текст в editor window будет такой:

$("#object_1").css("cursor","pointer");

$("#object_1").click(function(){  
//insert_code_here  
$("#object_1").fadeOut(2000);
});


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

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

При нажатии на шарик - (object_1) он будет медленно исчезать.














2 комментария:

  1. Ответы
    1. Отлично.Я очень рад, что у Вас получилось. Программирование на самом деле не сложная вещь.
      Можно сделать вместо ухода в затемнение, реализовать движение шарика
      Итак вместо $("#object_1").fadeOut(2000);
      Вставить сл. код:

      // определяем положение объекта по оси х
      var x=get_obj_x("#object_1");
      // увеличиваем значение
      x=x+50;
      // двигаем объект по left - т.е. оси x за время пути равное - 500 миллисекунд
      $("#object_1").animate({left:+x+"px"},500,function(){ });

      Удалить