Кузница мысли » Создание Flash игр

Правила оформления бага

admin — Mon, 06 Apr 2009 05:41:05 +0000

Баг необходимо оформлять следующем образом:

Краткое описание (название, одним предложением)
Шаги, которые приводят к багу (здесь может быть один и более шаг, нумеруйте их пожалуйста)
Что происходит (то, что проиходит по выполнении последнего шага)
Что по Вашему мнению должно пройзойти (то, что должно было произойти по выполнению последнего шага)

Если необходимо, сопровождайте баг изображениями.

Поворот и движение объекта за целью (мышью)

admin — Mon, 09 Mar 2009 06:20:59 +0000

Данный рецепт предназначен для тех людей, которые хотят создать что-то, что бы преследовало курсор мыши (или любую другую цель), плавно перемещаясь по экрану и поворачиваясь в сторону преследуемого объекта.

Для начала рекомендую к ознакомлению (хотя бы краткому) вот этой статьи.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

var RAD_DEG:Number = 180 / Math.PI;

_root.attachMovie ("player", "player", 0, {_x:Stage.width / 2, _y:Stage.height / 2});

game = {};

game.player = {};

game.player.clip = _root["player"];

game.player.flexibility = 5;

game.player.allowedError = 5;

game.player.speed = 5;

function rotateObject ():Void

{

var targetAngle:Number = Math.atan2 (game.player.clip._y - _root._ymouse, game.player.clip._x - _root._xmouse);

var errorAngle:Number = targetAngle * 180 / Math.PI - game.player.clip._rotation;

if (Math.abs (errorAngle) > game.player.allowedError)

{

if (((errorAngle > 0) && (errorAngle < 180)) || (errorAngle < -180))

{

game.player.clip._rotation += game.player.flexibility;

}

else

{

game.player.clip._rotation -= game.player.flexibility;

}

}

}

function moveClip ():Void

{

game.player.clip._x -= Math.cos (game.player.clip._rotation / RAD_DEG) * game.player.speed;

game.player.clip._y -= Math.sin (game.player.clip._rotation / RAD_DEG) * game.player.speed;

}

_root.onEnterFrame = function ()

{

rotateObject ();

moveClip ();

}

В строках с 12 по 27 происходит процесс поворота объекта, который подробно рассмотрен здесь. Я не буду повторно расписывать его в этом рецепте. Давайте посмотрим на строки 29 – 33. Функция moveClip () выполняет перемещение объекта по экрану. Координата х клипа уменьшается на произведение косинуса угла поворота клипа на скорость объекта. Координата у клипа уменьшается на произведение синуса угла поворота клипа на его скорость объекта. Таким образом, достигается иллюзия плавного поворота и движения.

Смотрим что получилось тут:
moving and rotate object around the mouse
Исходник примера тут: movingrotate

Создание шрифта во Flash CS3

admin — Thu, 26 Feb 2009 16:39:42 +0000

Недавно понадобилось создать шрифт во Flash. К своему изумлению я понял, что это для меня загадка. Но я ее разгадал, вот рецепт:

1. Если у вас закрыто окно библиотеки клипов (library) откройте его (Window – Library или Ctrl + L).

2. Далее кликаем кнопочку (честно говоря не знаю точного названия) More options, как показано на картинке.

flash cs3 library view

3. Из меню выбираем опцию New font.

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

Поворот объекта мышью

admin — Fri, 13 Feb 2009 06:46:27 +0000

Поворот объекта за мышью реализуется очень просто. Надо просто в каждом кадре присваивать свойству _rotation клипа игрока (объекта) арктангенс угла положения мыши на экране относительно этого клипа. Наверное, прочитав предыдущее предложение, Вы погрустнели. Но это не беда. Я и сам до конца не понимаю этого. Добрые индусы, писавшие Flash, позаботились о том, что бы класс Math содержал готовую функцию atan2 (), которую мы и будем использовать для нахождения этого арктангенса угла..

Давайте рассмотрим код actionscript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

_root.attachMovie ("player", "player", 0, {_x:Stage.width / 2, _y:Stage.height / 2});

game = {};

game.player = {};

game.player.clip = _root["player"];

game.player.flexibility = 5;

game.player.allowedError = 5;

function rotateObject ():Void

{

var targetAngle:Number = Math.atan2 (game.player.clip._y - _root._ymouse, game.player.clip._x - _root._xmouse);

var errorAngle:Number = targetAngle * 180 / Math.PI - game.player.clip._rotation;

if (Math.abs (errorAngle) > game.player.allowedError)

{

if (((errorAngle > 0) && (errorAngle < 180)) || (errorAngle < -180))

{

game.player.clip._rotation += game.player.flexibility;

}

else

{

game.player.clip._rotation -= game.player.flexibility;

}

}

}

_root.onEnterFrame = function ()

{

rotateObject ();

}

Вначале мы добавляем клип с игроком на экран. Затем создаем объект game, в котором будем хранить всю информацию об игре. Обратите внимание как мы связываем добавленный клип игрока, с свойством clip объекта game.player. Теперь мы можем использовать это свойство если захотим провести какую-либо операцию с клипом на сцене. О свойствах flexibility и allowedError мы поговорим чуть ниже, а пока давайте перейдем к разбору функции rotateObject ().

Итак, пресловутая функция atan2, о которой я вкратце упоминал в начале статьи. Именно она будет делать основную работу и нам совершенно неважно как она ее будет делать, потому что на выходе мы будем получать именно тот угол, на который надо повернуть наш клип игрока, что бы он смотрел прямо на указатель мыши. Пожалуйста, почитайте в help’е Flash о том как она работает, мы же только коснемся тех параметров, которые надо передавать в эту функцию. Итак, первый параметр – это расстояние по оси Y от объекта игрока до Y координаты мыши, второй параметр – это расстояние по оси X от объекта игрока до X координаты мыши. Как расстояние определяется на прямой линии? Правильно, вычитанием одной координаты из другой. Это мы и делаем прямо при внесении параметров в функцию, т.е. налету.
В принципе, на этом можно было бы и остановится, так как мы уже имеем угол, на который надо поворачивать наш игровой объект. Мы этот угол можем присваивать свойству _rotation нашего клипа и он будет поворачиваться. Но в таком случае это будет происходить мгновенно.
Если Вы хотите добавить немного реалистичности в процесс поворота, то вам надо несколько замедлить этот процесс. И вправду ведь, невозможно повернутся мгновенно, в природе все происходит с определенной задержкой.
Итак, следующие строки кода, начиная с объявления переменной errorAngle замедляют и управляют процессом поворота. errorAngle – это величина, показывающая, на сколько отличается текущий угол поворота объекта от угла, на который надо повернуть объект, что бы он смотрел прямо на мышку. Дальше происходит проверка на то, на сколько ошибка отклонения больше или меньше реального угла поворота, и если она отличается на величину allowedError, то делается коррекция, т.е. объект поворачивается по или против часовой стрелке.
Flexibility влияет на то, как быстро объект будет поворачиваться. В флэш играх это очень важный показатель, влияющий на верткость объекта. Так, например, меняя этот показатель от меньшего к большему можно сделать несколько самонаводящихся ракет с различной степенью маневренности.
allowedError это то допустимое значение ошибки отклонения при котором поворот происходить не будет. Т.е. она позволяет создать некий коридор (например, до 5 градусов), при котором поворот происходить не будет.

Не думал что получится столько букв, но надеюсь, эти комментарии хоть как-то помогут Вам разобраться в происходящем. Если нет, рекомендую к прочтению книгу «Flash. Трюки» O’Relly. Приведенный в данной статье метод полностью основывается на одном из трюков этой книги.

Исходник с примером поворота объекта мышью во Flash (.fla):

rotateobject

Пример поворота объекта мышью во Flash (.swf)

The Flash plugin is required to view this object.

rotateobject

Движение объекта в пределах более чем одного экрана

admin — Tue, 03 Feb 2009 17:05:58 +0000

Одной из первых задач, которые должен решить начинающий программист флэш игр – это то, как заставить героя (будь то космический корабль, воин или черепашка ) двигаться по экрану не только в пределах обозначенных разрешением монитора (например 1024х768), но и за ними.

Как же это сделать?

Давайте посмотрим на проблему со стороны. У нас есть герой, у нас есть экран монитора. Если герой перемещается в какую-либо сторону он неуклонно двигается к границе экрана, рано или поздно достигнет ее и скроется за ней. Но это недопустимо.

Следовательно, герой вообще не должен перемещаться, он должен стоять на месте. В то же время весь мир во круг него должен двигаться. Таким образом будет достигнута иллюзия перемещения героя по местности, намного превышающей размеры монитора.

Давайте посмотрим более подробно, как это можно реализовать с помощью Flash.

1. Добавляем экземпляр клипа героя на сцену, размещая его посередине экрана (в библиотеке должен быть клип с именем player).

1	_root.attachMovie ("player", "player", 1, {_x:Stage.width / 2, _y:Stage.height / 2});

2. Добавляем экземпляр клипа локации на сцену. Это может быть просто пустой клип, к которому потом можно будет добавлять другие клипы, которые будут создавать атмосферу игрового уровня (например, если вы делаете космический экшн, можно будет добавить звезды, астероиды, планеты и прочие элементы).

1	_root.attachMovie (“location”, “location”, 0);

Обратите внимание: клип игрока расположен над клипом с локацией.

Теперь, когда у нас есть оба клипа на сцене, надо заставить двигаться клип с локацией, для создания иллюзии передвижения.
3. Давайте создадим объект game, в котором будем хранить все данные об игре:

1
2
3
4
5
6

game = {};

game.player = {};

game.location = {};

game.player.clip = _root[“player”];

game.location.clip = _root[“location”];

game.player.speed = 1;

Теперь, мы имеем удобные ссылки, которые можем использовать для обращения к клипам практически из любого места кода. А вот собственно и сам механизм передвижения клипа локации:

1
2
3
4
5

public function moveLocationClip ():Void

{

    game.location.clip._x += Math.cos (game.player.clip._rotation / RAD_DEG) * game.player.speed;

    game.location.clip._y += Math.sin (game.player.clip._rotation / RAD_DEG) * game.player.speed;

}

где: RAD_DEG – это константа, позволяющая переводить значение выраженное в радианах в градусы (RAD_DEG = 180 / Pi);
game.player.speed – скорость движения объекта (посмотрите, ранее мы присвоили этому свойству значение 1, т.е. скорость равна 1 пиксель / кадр);
game.player.clip._rotation – угол поворота клипа игрока на сцене, он определяет в какую сторону будет двигаться локация.

Поместив данную функцию в обработчик onEnterFrame мы добьемся того, что с наступлением каждого нового кадра, локация будет перемещаться по оси x и y в соответствии с углом поворота клипа игрока и его скорости.

Можете посмотреть что получилось здесь:

The Flash plugin is required to view this object.

backgroundmoving
Пример .fla здесь:
backgroundmoving

Cassiopeia – Доска счета

admin — Tue, 03 Feb 2009 07:19:23 +0000

Рад представить новую фичу Игры – доска счета. Теперь пользователь сможет регистрироватся, отсылать свой счет, а так же смотреть счет других игроков.

Доска счета Cassiopeia

Все данные хранятся в xml файле, который лежит на сервере. Отправка данных работает через скрипт Perl. Пока что (из соображений производительности) в таблицу могут попасть только 50 человек с наивысшим значением High score. Т.е. если таблица уже содержит 50 записей, и кто-то отправил High score, значение которого выше самого низкого значения из таблицы, то таблица будет пересортирована и последняя запись будет удалена.

Проверка плагина подсветки ActionScript кода

admin — Wed, 28 Jan 2009 08:56:20 +0000

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

Плагин поддерживает огромное количество языков и имеет мощную систему настроек. Советую.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

private function sortScore ():Void

{

    var id:Number = 0;

    cassio.fw.sHs = {};

    for (var i:Number = 0; i < cassio.fw.hs.nLength; i++)

    {

        for (var j:Number = 0; j < cassio.fw.hs.nLength; j++)

        {

            if (cassio.fw.hs[id].score < cassio.fw.hs[j].score && !cassio.fw.hs[j].isChecked)

                id = j;

        }

        cassio.fw.sHs[i] = {};

        cassio.fw.sHs[i].score = cassio.fw.hs[id].score;

        cassio.fw.sHs[i].username = cassio.fw.hs[id].username;

        cassio.fw.hs[id].isChecked = true;

        id = getFirstUncheckedElementId ();

    }   

}

Фаза 7. Шлифовка.

admin — Sat, 17 Jan 2009 13:34:46 +0000

«Собирание камней прошло» удачно, теперь надо отшлифовать то, что получилось. Вот план, надеюсь завершающей фазы разработки Cassiopeia.

Фаза 7. (0/11) Шлифовка.
1. Улучшение ИИ.
1.1. Противник не нападает если игрок не приблизился на определенное расстояние (1000 px)
1.2. При встречном движении противник летит без изменения курса в течении нескольких секунд, затем совершает поворот.
1.3. Разработка метода moveToTarget () для движени к цели (если есть).
1.4. Остановка если цель потеряна.
2. Улучшение стартового меню.
2.1. Разработка методов List () для отображения информации в специальных контейнерах.
2.2. Создание анимационного эффекта вспышки при отображении и переключении между информационными окнами (напр.Controls -> About)
2.3. Добавление движщихся комет (создание класса для управления кометами с последующей интеграцией на backframe)
2.4. Создание окна Controls.
2.5. создание окна About.
2.6. Создание окна High Scores.
2.6.1. High Score хранится на сервере в xml.
2.6.2. отображаются только первые 100 игроков.
2.6.3. Для отправки счета необходимо ввести имя.
2.6.4. Имя должно быть уникальным.
2.6.5. High score – это сумма заработанных игроком кредитов.
3. Улучшение UpgWindow класса
3.1. Создание возможности динамического отображения списков вооружений.
3.2. Создание кнопок Buy / Sell.
3.2.1. Buy отображается если есть возможность купить: достаточное количество денег, доступны слоты для предмета..
3.2.1. Sell отображается возле установленного в текущий момент оборудования.
3.3. ПЛавное отображение окна.
3.4. Плавное закрытие окна.
3.5. Добавление закладки для квестов и торговли.
4. Добавление всех типов станций.
5. Добавление всех типов фона.
6. Звуковое сопровождение.
6.1. Звуки выстрелов.
6.2. Звуки взрыва (ракет и кораблей).
6.3. Звуки двигателей.
6.3. Звуки клика по кнопкам меню.
7. Кастомизация цвета лазера в зависимости от его типа.
8. Добавление новых типов кораблей.
9. Улучшение логики добавление кораблей противника.
9.1. Использование xml для хранения типов кораблей.
9.2. Сила корабля зависит от его типа (необходимо создать конфигруации кораблей от слабых к сильным).
9.3. Создание механизма подсчета количества денег за сбитый корабль врага, в зависимости от его типа.
10. Создание возможности загрузить или начать новую игру при уничтожении корабля игрока.
10.1. При загрузке – игра загружается с последней станции, которую посетил игрок.
10.2. При выборе начать заново – игра начинается заново, Shared object очищается.
10.3. Затемнение экрана
11. Индикатор загрузки