четверг, 30 мая 2013 г.

Сайтлок для FGL.com

Всем привет!
Первая публикация игры на FGL.com и сразу же возникла проблема - сайтлок на fgl.com и www.fgl.com не работает в игре, перекидывает на страницу варнинга. Хорошо, что заметил быстро, а то так бы и размещалась игра, показывающая сообщение варнинга вместо самой игры ))

Сайтлок для FGL.com делается просто - нужно учитывать, что обращение к файлам идет через https и что домен, где размещаются SWF-файлы - это не fgl.com, как можно подумать, а flashgamelicense.com.

Ниже готовый AS2-код для сайтлока Флеш-игры для публикации ее на FGL.com, вставляется в коде нужных кадров в самом начале:

// Получаем текущий хост
domain = _root._url.split("https://").join("").split("/")[0];;

// Проверяем, если домен не наш, то выводим варнинг
if ((domain != "flashgamelicense.com") and (domain != "www.flashgamelicense.com")) {
    _root.gotoAndPlay("warning");
}

Первая коммерческая игра!

Ура, закончил первую игру, которую выставил на аппрув на FLG.com. Сейчас у нее статус Pending, ожидает модерации.
Чуть позже напишу об игре и процессе ее разработки, создания графики и всего остального.

воскресенье, 26 мая 2013 г.

Фотошоп и рисование кривыми (инструмент Pen)

Порисовал сейчас в Фотошопе при помощи Pen и мне совсем не понравилось, так же, как и при знакомстве с этим инструментом.
Может я просто не понял, как нужно работать с кривыми в Фотошопе, но в InkScape мне гораздо удобнее работать с кривыми, т.к. после оконтуривания (Ctrl+Shift+C) их можно в любом месте начать изменять и программа сама помогает в этом - ставит у близлежащих точек "рычаги" изменения кривизны линии. А в Фотошопе такого нет - либо ставь новую точку, либо передвигай существующую.
И еще очень выводит из себя то, что в Фотошопе сразу же закрашивается пространство между точками - из-за этого теряется восприятие процессе. А если кривые рисуются как обводка отсканированного скетча, то вообще это очень сильно сбивает с толку.
В общем, векторную графику я лучше в InkScape буду рисовать, нравится мне его интерфейс и подход к процессу рисования. А еще очень удобен инструмент Карандаш с выставленным сглаживанием 50-60. Когда рисуешь линию - она "сглаживается", становится овальной и красивой, а не той дрожащей непонятной линией, которая была нарисована. Даже только за этот инструмент стоит выбрать ИнкСкейп для рисования вручную.

Подборка видеоуроков по InkScape

Нашел хорошую группу в ВК по InkScape, много туториалов: https://vk.com/videos-52105226

По InkScape туториалов по созданию именно игровых персонажей сложной проработки я не нашел. Поэтому есть более универсальное решение - смотреть\читать туториалы по созданию персонажей вообще, созданию персонажей в векторных редакторах (Adobe Illustrator, Adobe Flash CS, Corel Draw) и применять их для создания персонажей в InkScape. Отличий-то практически и нет - те же инструменты для создания векторной графики, только интерфейс другой.
В Гугле много уроков по кейворду "создание персонажа для игры".

Подборка туториалов по созданию игровых персонажей в векторе (английский язык): http://www.designscollage.com/2010/11/brilliant-character-design-illustrator-tutorials/

И еще хороший ресурс с туториалами по векторному рисованию: http://vector.tutsplus.com/category/tutorials/
Есть категория записей о создании персонажей, об анимации и много его чего интересного, английский язык.

И еще отличная подборка именно по созданию векторных персонажей (тоже английский язык): http://www.noupe.com/graphics/40-character-mascot-illustrator-tutorials.html
Векторных персонажей можно создавать и в Фотошопе, поэтому, возможно, я могу пользоваться не только InkScape для создания графики для игры, но и Фотошопом, но не для стиля "ручного" рисования, т.к. от руки рисовать я не умею, а используя "технику векторного рисования", т.е. такая полу-мультящная графика, но при помощи мощных инструментов Фотошопа, к которому я привык, за исключением инструмента Перо, которому я так и не научился. Но InkScape дал мне навык рисования кривыми, так что освоив хорошо в Фотошопе рисование кривыми, я смогу создавать и в Фотошопе графику.

Уроки по InkScape, продолжение

Создаем Деда Мороза: http://inkscape.paint-net.ru/?id=50
У меня не очень получилась шапка, какая-то плоская,но саму технику работы с карандашом я усвоил, в уроках даже там, где нужно делать блики фигурами, я уже карандашом быстрее нарисую, по размеру подправлю и делаю блик.
Получился такой Дед Мороз:
Создаем грустный камень: http://inkscape.paint-net.ru/?id=51
Урок мне очень понравился, уже похоже на реальную сцену из Флеш-игры или Флеш-мультфильма :)
У меня получился такой грустный камень:
Создаем джинсовую ткань: http://inkscape.paint-net.ru/?id=52
У меня получился такой деним:
На этом курс базовых уроков завершен.
Хорошее описание инструментов InkScape можно найти здесь: http://inkscape.paint-net.ru/?id=2
 В качестве "бонуса" пройден урок по созданию "привидения" из игры Пакман: http://www.openarts.ru/inkscape-tutorials/characters/118-pac-man-baddies-with-inkscape
У меня получились такие враги Пакмана:

Уроки по InkScape, продолжение

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

Создаем обои с рыбкой: http://inkscape.paint-net.ru/?id=47
У меня получились такие:
Создаем стакан с соком: http://inkscape.paint-net.ru/?id=48
Заполнить узором из пузырьков объект для него у меня не получается, пузырьки генерируются по всему рабочему полю. Поэтому просто вручную их после генерации переместил.
У меня получился такой стакан с соком:
Создаем Hello Kitty с применением направляющих: http://inkscape.paint-net.ru/?id=49
Мне было лень высчитывать места пересечения направляющих для ушей, глаз, носа, бабочки и усов Хелло Китти, поэтому их я ставил "на глаз", получилось почти то же самое, что и в оригинальном примере, но усы не закругленные, лень возиться с контурами концов усов. Получилась такая Хелло Китти:
Осталось еще три урока, пройду их сегодня, а завтра начну создавать персонажа по контурам отсканированного рисунка.

Если InkScape тормозит из-за прозрачности и размытости

Если InkScape начинает тормозить из-за создания объектов с прозрачностью и размытостью, есть два пути обойти этот момент:
1. Уменьшить масштаб рабочего поля (чем меньше масштаб - тем быстрее будет работать, меньше зависать).
2. Отключить эффекты через Ctrl+5 или Вид -> Отображение -> Без фильтров.

Уроки по InkScape, продолжение

Создаем куклу: http://inkscape.paint-net.ru/?id=40
У меня получилась такая:
Создаем сферу с паззлом: http://inkscape.paint-net.ru/?id=41
В уроке применяется фильтр "Фаска - Элемент паззла", но у меня в InkScape он делает не тонкий край, а широкий. Поэтому я к сфере добавил обводку из градиента и направление сделал справа снизу к влево вверху, получился эффект как в уроке (грани паззлов сферы). У меня получилась такая сфера с паззлом:
Создаем пингвина: http://inkscape.paint-net.ru/?id=42
У меня получился такой:
Создаем красивые обои: http://inkscape.paint-net.ru/?id=44
У меня получились такие обои с бликами и пингвином:

суббота, 25 мая 2013 г.

Как добавить новые фильтры в InkScape

В InkScape по-умолчанию итак много фильтров, но если Вам нужны какие-то специальные фильтры, то это делается так:
1. SVG-файл с фильтрами копируется в папку _путь_до_папки_InkScape_\Inkscape\share\filter. Обычно путь к папке это C:\Program Files\InkScape\.
2. Если InkScape был запущен - нужно его перезапустить.
3. В меню фильтров появились новые фильтры!

Уроки по InkScape, продолжение

Создание "граффити" (изучение тайлов, создание узоров из них): http://inkscape.paint-net.ru/?id=36
У меня получилось так:

Создание листа со стилизованным текстом bugs (жуки): http://inkscape.paint-net.ru/?id=37
У меня получилось так:
Создание сердца в стиле рисования штрихами: http://inkscape.paint-net.ru/?id=38
У меня получилось так:

Обучение работе с редактором InkScape, продолжение

Не стал перегружать уроками первую запись, уроков много, буду публиковать их по несколько за раз.

Создаем биллиардный шар: http://inkscape.paint-net.ru/?id=31
У меня получился такой:
Создаем чупа-чупс: http://inkscape.paint-net.ru/?id=32
У меня получился такой:
Табличка с вырезанной надписью: http://inkscape.paint-net.ru/?id=34
У меня получилась такая:
Рисуем открытку: http://inkscape.paint-net.ru/?id=35
У меня застопорилось на шаге Интерполяции, поэтому я вручную сделал 5 полупрозрачных контуров и из-за этого (полупрозрачность) InkScape стал нереально тормозить, поэтому я кое-как доделал оформление открытки и перешел к следующему уроку. Моя открытка получилась такая:

пятница, 24 мая 2013 г.

Обучение работе с редактором InkScape

Базовый урок, знакомство с интерфейсом: http://inkscape.paint-net.ru/?id=21

Рисуем стрелку (закрепление навыков первого урока + Фильтры): http://inkscape.paint-net.ru/?id=24

У меня получилась такая стрелка:

Делаем красивый текст: http://inkscape.paint-net.ru/?id=23
У меня получился такой:
Делаем сердце: http://inkscape.paint-net.ru/?id=25
На крайнем шаге, где создается блик, у меня как-то не получается создавать блику контур с рассеиванием, поэтому сделал без контура и наложил фильтры: 2 раза Свет и тень - Свечение, 1 раз Свет и тень - Размытое свечение, затем включил градиентный контур и объекту прозрачность 88. Получилось такое сердце:
Делаем звезду с глазами: http://inkscape.paint-net.ru/?id=29
У меня получилась такая звезда с глазами:

Векторная графика для Флеш-игр

Раз уж я попробовал растровую графику и трехмерное моделирование и не смог создать самостоятельно графику для своей первой коммерческой игры, для полного удовлетворения жажды прекрасного нужно и с векторной графикой познакомиться, авось с ней дело пойдет и при помощи бумаги, карандаша, сканера, векторого редактора и мышки я смогу создать подходящую графику и не придется искать стороннего 2D-артиста, платить деньги за персонажей и ждать, пока нарисуют мой заказ.

Платным программам векторной графики Adobe Illustrator и Corel Draw есть бесплатные альтернативы, самый известный векторный редактор из бесплатных - это InkScape, который я сейчас как раз скачиваю.

За пару минут нарисовал на бумаге (на ней легче, чем на дигитайзере) тестового персонажа и сразу же отсканировал:


Сейчас InkScape установится и по мануалам начну создавать векторную графику.

О результате отпишу завтра. Кто знает, может векторная мультяшная графика - как раз то, что мне нужно?

===
Уроки и туториалы по InkScape:
много уроков: http://inkscape.paint-net.ru/?id=21
создание персонажа "привидение" из игры Пакман: http://www.openarts.ru/inkscape-tutorials/characters/118-pac-man-baddies-with-inkscape

А также нашел еще одну хорошую книгу по созданию Флеш-игр, называется "Секреты разработки игр в Macromedia Flash MX", во второй главе из нее я как раз и увидел способ создавать графику для Флеш-игр методом рисования на бумаге, сканирования, а затем превращения в векторную графику.

Большой облом, если нет художественного вкуса, не стоит делать графику

Короче, ниже мой первый "персонаж", котяра Пурген, которого полдня моделировал в Блендере после 5 дней изучения:

Хотелось сделать персонажа для Flash-игры, но такой подход не работает. В мультяшную, в "векторном" стиле графику такой 3D-персонаж не вписывается, выглядит слишком реалистично и чужеродно. А мне нужно что-то вроде такого окружения:



и таких персонажей:



Ну а Пурген на рисованном фоне вообще не смотрится, ему бы какие-нибудь трехмерные деревья на фоне, созданные в Bryce или Vue, и это в Unity 3D или другом трехмерном движке.

В общем, объективно, зря потратил время на освоение Блендера, не подходит он для моей задачи или нужно осваивать дальше, чтобы делать реально классные хай-поли модели, включая создание сцен для фонов.

В общем, с чего начали, к тому и пришли - нужно найти хорошего 2D-артиста и сотрудничать с ним по графике, сконцентрировавшись на кодинге и разработке концептов Flash-игр.

Как в Blender сделать нужную камеру активной

Простой вопрос, а ответ на него найти сложно.
Решение такое - выбираем нужную камеру на сцене и жмем Ctrl+Num0 (ноль на цифровой клавиатуре).

Как в Blender задать прозрачный слой фона

Новые версии Блендера сильно отличаются от предыдущих.
Например, я полчаса искал способ сделать прозрачный фон.
Напишу, кому тоже нужно делать фон прозрачным, если используется Blender 2.67:
1. Идем в закладку Render в правой панели.
2. Во вкладке Shading, в пункте Alpha ставим Transparent.
3. Во вкладке Output проверяем, что в выпадающем списке стоит формат файла PNG или TIFF, правее - RGBA, Color Depth: 8.
Теперь, когда рендерите сцену, фон за ней будет прозрачным (из маленьких квадратиков, обозначающих прозрачный фон) и при открытии в графическом редакторе, например, Фотошоп, фон также будет прозрачным.

Как в Blender быстро и просто задать "точку ротирования" (pivot point)

У объектов в Блендере есть такая большая оранжевая точка, обычно в центре объекта. Если нужно ее переместить (например, объект - это рука или нога, у которой точка поворота не в центре), делаем очень просто:
1. Переходим в режим редактирования объекта (клавиша Tab), выделяем все (клавиша A),
2. Перетаскиваем в нужном направлении (клавиша G, затем, если нужно - X\Y\Z),
3. Выходим из режима редактирования, pivot point теперь в нужном месте!

Создание UV-текстур в Blender

В Блендере есть очень мощный инструмент текстурирования - UV-текстуры.
UV-текстуры - это возможность устанавливать в качестве текстур объектам собственные изображения или видеоролики.
Накладывать такие текстуры сложнее, чем обычные текстуры, но иногда, когда очень нужно - например, нарисовать кубическому коту "пальцы" на лапах или глаза - помогает UV-текстурирование.
Отличный и простой урок по созданию UV-текстур здесь: http://scirraconstruct.ru/community/blog/misc/20.html

четверг, 23 мая 2013 г.

Как в Blender добавить на полку инструментов Fur Lab (мех, трава)

Идем сюда: http://wiki.blender.org/index.php/Extensions:2.6/Py/Scripts/Object/Hair_Lab
Скачиваем .py-файл, копируем в какую-нибудь папку, например, addons.
В Blender открываем File -> User Preferences -> вкладка Addons -> внизу кнопка Install from files, выбираем .py-файл, жмем Save.
Теперь на Полке инструментов (клавиша T) снизу появились три новые инструмента для создания травы, волос и меха.

Первый персонаж в Блендере

По иллюстрированному мануалу и видеоуроку сделал первого персонажа и мех ему.
Сам персонаж (собака): http://blender3d.org.ua/tutorial/22.html
Мех:
мануал: http://anyky.blogspot.com/2011/08/c-blender-248.html
видеоурок: http://www.youtube.com/watch?v=rPktbT7eUHM

Получилось как-то не очень, собака, смахивающая на облезлую крысу ))


Еще комп тормозит, когда с частицами работаю, видимо слишком большая нагрузка на процессор, память и видеокарту, а они у меня под 3D-моделирование не приспособлены вообще.
Буду дальше совершенствовать навык, до тех пор, когда смогу сделать нужного мне перса и затем уже саму Флеш-игру с этим персом.

среда, 22 мая 2013 г.

Конфига для 3D-моделирования: UPDATE

Как мне тут советуют знающие люди в теме, core i7 плюс видеокарта QUADRO - это для рендеринга больших, сложных сцен. У меня же задача другая, не кино со спецэффектами или анимационные компьютерные фильмы вроде Трансформеров.
Моя задача проще и менее ресурсоемкая - создание игровых персонажей и объектов для последующего переноса в игры. То есть, какой-нибудь космический корабль для арканоида на 10 тысяч полигонов не сравнится с анимированной трехмерной сценой на 10 минут для Трансформеров 5 в 3 миллиона полигонов, которые на самой быстрой станции, а не кластере будут рендерится пару-тройку дней.

Поэтому, я считаю, можно снизить требования к железу. Хотя хочется добавить RAID1, чтобы не переживать за данные, а также отдельную лицензию Win7 на этот компьютер и новый, хорошо продуваемый корпус в одном стиле с темным монитором, чтобы раз уж собирать хороший компьютер, то и внешний вид у него был красивый и стильный :)

В общем, такая конфига сформировалась:
- материнская плата: GIGABYTE GA-Z68P-DS3 (rev. 1.0),
- процессор: Intel Core i5 2300 2800MHz,
- оперативная память: 4 х 4096Mb Kingston KVR16R11D8/4HC DDR3 1600MHz,
- видеокарта: ZOTAC NVIDIA GeForce GTX 650 Ti 2048MB,
- блок питания: AeroCool VP-750W 750W,
- жесткие диски: 2 х Hitachi 500GB,
- RAID-контроллер: RAID Promise PCI -SATA, 4 ports,
- монитор: BenQ V2420H 24", 1920x1080, HDMI,
- корпус: Delux DLC-MV409 Midi-Tower ATX,
- клавиатура: Delux DLK-1500UB Ultra Slim USB,
- мышь: HP XQ500AA, Black, USB,
- ОС: Microsoft Windows 7 Home Premium OEM.
Итого: $1100

Как видно из конфигурации выше, процессор с i7 был "даунгрейжен" до i5, тем не менее, тоже с 4 ядрами, видеокарта с Quadro сменена на игровую GTX 650 Ti, памяти оставляем 16 гигов, лишней не будет, чтобы Блендер не крашился от нехватки памяти, добавлен второй жесткий диск и RAID-контроллер для работы в RAID1-массиве, а также добавился корпус.
Корпус выбирался по совместимости с ATX (материнская плата большая, а то можно было бы взять миниатюрный корпус под mATX) и наличию больших отверстий для вентиляции.
С операционной системой тоже экономия - OEM-версия имеет ограничение, может устанавливаться только на один уникальный компьютер и потом продаваться вместе с ним, без переноса на другое железо. Зато дешевле и у Home Premium нет ограничений Starter или Home Basic.

В общем, начинали с бюджета "не больше 20к рублей", а получилось, что вышли за 30к рублей. Тем не менее, эта станция для рендеринга планируется для работы, а не развлечений, а значит покупка оправдана и, надеюсь, вернет вложенные в нее средства. Но это будет тогда, когда я на ее покупку деньги смогу отложить.

Собрал конфигу для 3D-моделирования для покупки

Определился с конфигой, получается такая:
- материнская плата: CIGABYTE на чипсете Z68,
- процессор: i7 3400MHz,
- память: 2x4GB Kingston 1600MHz,
- видеокарта:  Nvidia QUADRO 600 1GB,
- блок питания: AeroCool 750W,
- жесткий диск: Hitachi 2,5' SATA 500Gb,
- монитор: BENQ TN 1920x1080 HDMI,
- клавиатура: Ultra Slim (как ноутбучная),
- мышь: стоковая,
корпус midi-tower у меня есть.
По сумме выходит чуть меньше 30к рублей.

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

воскресенье, 19 мая 2013 г.

Первая модель в Блендере

По второму уроку видеоучебника, про который писал в предыдущей записи, создал кофейную чашку. С ручкой какая-то фигня получилась, т.к. при повороте face'ов (панелек с точкой в центре) они смещались криво из-за того, что я кружку повернул относительно осей XYZ и потом вручную доделывал ее, перемещая точки в нижней части ручки этой кофейной кружки.
Кружка стоит на столешнице, включен один Spot и Ambient Occlusion:


Это изображение рендерилось около 30 секунд, хотя полигонов тут всего пара сотен. Видимо, придется для комфортной работы обязательно покупать мощный компьютер, чтобы не ждать минутами, пока сложные модели отрендерятся.

Но мне гораздо больше нравится работать в Блендере, чем рисовать в Фотошопе самому такую кружку. Я бы ее не смог так нарисовать, чтобы реалистично, с тенями и переходами. А в Блендере за 20 минут в первый раз создал и еще сама 3D-модель сохраняется.

Станция для 3D-моделирования

Начал изучать Блендер по видуоучебнику от Максима Ткаченко (рекомендую, очень понятно и грамотно объясняет!), изучил два урока и уже столкнулся с тем, что мой ноутбук не очень-то приспособлен для моделирования.
Модификатор в 3 прохода нормально работает, но когда поставил сглаживание в 12 проходов (ради эксперимента), то Блендер тупо закрылся. 6 проходов рендерит, то нужно ждать несколько минут.

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

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

===
 Есть специальные видеокарты для работы с 3d приложениями. У многих есть специальные сертификаты.
Оптимизированы именно под графические редакторы.
Особенно серия nVidia QUADRO
Посмотрите вот тут список этих видеокарт
http://www.nix.ru/price/svga_prof.html
===
Сборка компьютера для 3D-моделирования: http://yoursputnik.ru/3d-computer-3ds-max-2011/2510
===
Выбор комплектующих для компьютера для 3D-моделирования: http://www.cyberforum.ru/computer-high/thread682016.html
===
Хороший совет по выбору комплектующих для станции 3D-моделирования: http://otvety.google.ru/otvety/thread?tid=25c0bbd2ed4541c0
===
Хорошая обзорная статья по выбору железа для станции 3D-моделирования: http://3dpraktik.ru/publ/1-1-0-73
===
Как выбрать монитор для 3D-моделирования: http://komp1.ru/publ/kak_podobrat_professionalnyj_monitor/1-1-0-1
и тут:
http://www.temtehnika.ru/how-to-choose-monitor-pro/ 
===
Из мониторов огромный 24-27 монитор слишком большой, поэтому мне, после 15'4 ноутбука будет достаточно и 20', все равно огромный монитор.
Из недорогих рассматриваю такие модели:
CTX E20F5G 20" / 1600x900
AOC E2050Sn 20" / 1600x900
Acer G205HVB 20" / 1600x900
AOC e2050Sda 20" / 1600x900
AOC e2043FsK 20" / 1600x900
AOC e2051F 20" / 1600x900
LG E2042C 20" / 1600x900
BenQ G2025HDA 20" / 1600x900
Acer V203Hb 20" / 1600x900
AOC e2051Sn 20" / 1600x900
AOC e2050Sda 20" / 1600x900
LG Flatron E2041S 20" / 1600x900
Acer V203Hb 20" / 1600x900
Acer X203HCb 20" / 1600x900
Acer V203HVab 20" / 1600x900

По цене эти мониторы около $115.

Разрешения топовых Флеш-игр на FGL.com

Собрал статистику по разрешениям топовых Флеш-игр на FGL.com, просмотрено 20 игр,  получились такие результаты:
512 x 384 pixels
600 x 500 pixels
640 x 480 pixels
640 x 480 pixels
640 x 480 pixels
640 x 480 pixels
640 x 480 pixels
640 x 480 pixels
640 x 480 pixels
640 x 480 pixels
640 x 480 pixels

630 x 420 pixels
650 x 480 pixels
700 x 350 pixels
700 x 500 pixels
720 x 480 pixels
720 x 480 pixels

800 x 420 pixels
800 x 600 pixels
800 x 600 pixels

*жирным шрифтом выделены разрешения, которые повторяются более одного раза.

Статистика по количеству Флеш-игр с одинаковым разрешением:

640x480 = 9
720x480 = 2
800x600 = 2
другие = 7

Вывод:
Оптимально создавать Флеш-игры с разрешением 640x480 пикселей, раз большинство разработчиков (9 из 20) выбирают это разрешение для своих Флеш-игр. Причем, я смотрел игры от разработчиков, у которых Маркет рейты от единицы и выше, то есть, они продали игр на FGL.com на сумму от $250.

Ход конем или что делать, если нет художественного таланта

Как я писал в предыдущей записи, начал учиться рисовать. И даже кое-какие штрихи были ровными! ))
Но порисовав штрихи, начал идти дальше - рисовать кубы. И вот тут меня осенило, что таланта к рисованию у меня нет, печально. Линии выходят кривыми, хотя ничто не мешает руке делать их прямыми.
Попробовал рисовать на бумаге, ручкой и карандашом - аналогично.
Конечно, за полдня сложно научиться хорошо рисовать. Да что там, годы тренировок нужны, прежде чем я смогу рисовать на уровне. А столько ждать я не могу.

Поэтому, взвесив все за и против, решил сделать "ход конем", а именно:
1) Освоить 3D-пакет, благо, там не нужно рисовать рукой - привычная работа мышкой, перетягивание, изменение размеров и положения примитивов, подбор освещения и текстур.
2) Необходимые арты (на экран прелоадера, фоны), которые полюбому нужно рисовать, просто заказывать фрилансерам.

Такой подход имеет три плюса:
1) Я все равно сам создаю себе графику, хоть и другим путем - сначала 3D-модель, затем ее в 2D-спрайт. Причем, сама 3D-модель в будущем еще пригодится для другой игры или или сиквела этой же, но уже в трехмерной графике.
2) Сильная экономия средств на графику. Заказать 2 арта - один рекламно-красочный для прелоадера и постеров и второй, нейтральный, для фонов остальных кадров игры - это гораздо дешевле, чем заказывать анимированных персонажей вместе с артами.
3) Имея на руках персонажей, я могу легко показать художнику, что мне от него нужно - какие арты, стилистика, размеры рисованных объектов на них и т.д.

В общем, как и в ситуации с Unity 3D -> Flash, побившись о стену несостоятельности в художественном плане, нашел выход и теперь вместо 2-3 лет рисования штрихов, кубов и гамм, нужно быстро научиться создавать красивые 3D-модели в Блендере или другом фришном 3D-редакторе.

суббота, 18 мая 2013 г.

Учусь рисовать

В начале этого месяца у меня появился планшет Wacom Bamboo Pen, теперь я постигаю азы изобразительного искусства :)
Раньше я дизайнил, но мышкой, в Фотошопе, с помощью примитивов и свойств (готовые градиенты, тени, паттерны и т.д.) создавал веб-дизайн, т.е. дизайны веб-страниц, баннеры и логотипы. Никакой ручной работы в смысле рисования карандашом или кистью, не было необходимости.
Но вот теперь пришло время и понадобилось научиться рисовать самому. Причем, рисовать хорошо и красиво. Ведь инди-разработчику в одиночку приходится делать почти все, разве что, за исключением музыки и sfx, которые можно взять готовыми по лицензии CC0, а если нет именно того, что нужно - в Audacity наложить несколько фильтров и перекроить звуковую дорожку, большого мастерства здесь не нужно.

С графикой такой номер не пройдет - если игра "заточена" под определенный арт и графику, то парой кликов мышки ее не создашь. Более того, даже если нанимать стороннего гейм-дизайнера (2D-артиста), чтобы пояснить ему, что нужно, все равно нужно хоть немного уметь рисовать, создать простой эскиз, иначе он поймет по-своему и сделает не так, как нужно.

Хорошие уроки, можно сказать, экспресс-курс художника :D я нашел здесь: http://www.paintmaster.ru/index.php. В художку ходить у меня времени нет (сколько лет там учатся?), а базовые знания нужны - как держать карандаш (у меня - перо планшета), как наносить штрихи, линии. Я сейчас даже не умею ровно провести линию или равномерно заштриховать. Так что приходится учиться с самых азов.

Мои первые штрихи:



У меня старшая сестра хорошо рисует, хотя и не училась в художке. Может и мне по генам передалось это умение, посмотрим на результаты :) А я пока пойду еще штрихи рисовать, нужно тренировать руку новому виду деятельности.

Защита Флеш-игры от копирования (сайт-лок), iframe и реверсивного инжиниринга (дебага)

При создании Флеш-игры нужно уделить внимание ее защите. Защита подразумевает под собой три направления:
1. Защита от копирования (сайт-лок, невозможность разместить работоспособную игру на другом домене).
2. Защита от iframe (удаленно загружать страницу с SWF на другом домене).
3. Защита от реинжиниринга (защита кода и ресурсов).

Защита от копирования файла строится так:
1. В первом кадре, в самом начале идет проверка на текущий хост - если он не совпадает с тем, что прописан в коде, то показывается экран с предупреждением, переход на целевой УРЛ или что-нибудь на усмотрение разработчика игры.
2. Если текущий хост и прописанный в коде хост совпадают, то код выполняется дальше.

Как сделать сайт-лок:
1. Открываем код первого кадра и пишем ему после stop(); в самом верху такой код:
// Получаем текущий хост
domain = _root._url.split("http://").join("").split("/")[0];;

// Проверяем, если домен не наш, то выводим варнинг
if ((domain != "idgames.ru") and (domain != "www.idgames.ru")) {
    _root.gotoAndPlay("warning");
}
Можно добавить ниже if {} строку: else _root.gotoAndPlay("menu"); - если нужно перекидывать юзера сразу на какую-то целевую страницу. Если без else, то выполняется первый кадр.
2. Создаем новый кадр, называем его warning, там размещаем предупреждение или что хотите.
Пример флеш-приложения с работающим сайт-локом: http://idgames.ru/test/copyright.html или так: http://www.idgames.ru/test/copyright.html
Если же эту флешку запустить с другого домена, например отсюда: http://thebtc.ru/site-lock-game/copyright.html, то выходит кадр с варнингом и игра не будет работать.
3. Можно дополнительно в этом же или новом окне открывать целевую страницу, пример тут: http://thebtc.ru/site-lock-game/copyright_with_url.html
Делается это так - в if { } перед строкой перехода на кадр warning вставляется строка:
getURL("http://_целевой_УРЛ_/", "_blank");

Идем дальше - умный плагиатор может не копировать файл, а разместить код игры во фрейме. Если Вы защитите игру, то она не будет функционировать на чужом хосте, но плагиатор может вставить страницу с игрой во фрейме и показывать только саму игру, пример: http://thebtc.ru/site-lock-game/in_iframe_flash.html.
Как видите, игра "играет" и не выдает варнингов и открытия новых окон.
От таких хитрожопых есть защита - запретить показ флешки в iframe.

Как запретить показ Флеш-игры во фрейме:
Добавляем этот код в html-файл с игрой:
<script language="JavaScript">
var frameBusted = (top != self);
if (frameBusted) top.location.href = '/index.html';
</script>

Смотрим пример: http://thebtc.ru/site-lock-game/in_frame_flash_2.html. Пытаясь загрузить Флеш-игру в iframe, JS-код определяет, что это фрейм и открывает исходную страницу (нашу, где размещена игра).
Хитрожопые могут попытаться тянуть контент страницы через cURL, но и там их ждет облом - даже если страница будет пересобрана заново, флешка-то тянется с нашего сервера, а там  стоит проверка по текущему хосту.

Идем дальше, к третьему направлению защит. Дело в том, что защитить свою Флеш-игру от реверсивного инжиниринга на 100% невозможно. Что можно скомпилить, то можно и декомпилить.
Направления защиты от реверсивного инжиниринга делятся на:
1. Обфускаторы и протекторы.
2. Динамическая генерация кода.
3. Упаковка в embed, защита от сохранения SWF-файла из памяти и другие способы.
Подробно и обстоятельно об этих способах написано на Хабре, здесь: http://habrahabr.ru/post/110686/

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

Подводя итог:
Обязательно стоит добавлять в свою Флеш-игру сайт-лок, если Вы планируете размещать ее только на определенных сайтах (у себя, на NewGrounds, Kongregate, FGL и т.д.). Ну а если стоит задача распространить игру как можно шире, например, монетизируя ее рекламой, можно создавать версии без сайт-лока, чтобы любой сайт, портал или пользователь могли ее скопировать и публиковать на других ресурсах.

Схема создания простой игры в Flash CS3

1. Создаем три кадра: preloader, menu и game.
2. Каждому кадру пишем код: stop();
3. В preloader создаем прелоадер (смотрите предыдущую запись).
4. В menu кидаем две кнопки: New Game и More Games. New Game пишем код:
on(release) {
 _root.gotoAndPlay("game");
}
More Games пишем код:
on(release)  {
 getURL("http://_тут_УРЛ_спона_или_сайта_Вашей_студии_", "_blank");
}
5. В кадре game создаем саму игру. ВАЖНО: объектам из библиотеки при задании Линкажа, если у Вас Flash CS3, не забывайте убирать галочку "Export in first frame", чтобы прелоадер нормально отображался при загрузке игры.

Все, игра готова :)

Улучшения:
Можно создать еще кадры - Rules, Credits и для них кнопки в menu.
Для игр с уровнями можно создавать отдельные кадры, а в кадре game сделать тоже что-то вроде меню, где размещаются кнопки уровней и при нажатии на нужную - идет gotoAndPlay на заданный кадр с игрой.
Также нужно добавить музыку и sfx.
Для прелоадера можно загружать небольшую мелодию, чтобы она играла, пока идет загрузка файла. Но размером лучше не более 300 килобайт, а то сам прелоадер будет минуту загружаться, а пользователи долго ждать не любят, вернутся обратно и будут играть в другую игру.

пятница, 17 мая 2013 г.

Как сделать простейший прелоадер для Флеш-игры

В найденных мною мануалах все очень сложно, нужно создавать 100 кадров, много лишних движений.

Простейший прелоадер спроится по следующей схеме:
1. В новом проекте сразу создаются все нужные кадры и именуются (preloader, menu, credits, rules, game и т.д.). Кадру прелоадера задается код: stop(); (чтобы не переходил к следующему кадру).
2. В кадре прелоадера рисуется полная полоса загрузки, какой она будет на 100 процентах (делайте прямоугольник без рамки!).
3. Жмем F8 - создаем новый клип. Затем F9 - переходим к коду клипа, пишем там следующее:
onClipEvent(enterFrame) {
    // Получаем значения размера файла и сколько байт загружено
    total = _root.getBytesTotal();
    loaded = _root.getBytesLoaded();
   
    // Вычисляем, сколько процентов загружено
    percents = loaded/total*100;
   
    // Пишем округленное значение в цифровой индикатор
    _root.percents_text.text = Math.round(percents);
   
    // Вычисляем текущую длину бара загрузки
    this._xscale = percents;
   
    if (total <= loaded) {
        _root.gotoAndPlay("menu");
    }
}

Что делает этот код:
- сначала получаем глобальные переменные общего размера файла и текущее количество загруженных килобайт.
- затем вычисляем в процентах текущий прогресс загрузки файла.
- далее - опционально, у меня это маленький динамический текст под полосой загрузки, показывающий прогресс в цифрах.
- ниже меняем размер нашего клипа по длине на текущую величину прогресса.
- самое нижнее условие в if - это проверка, если размер загруженного файла больше или равен размеру файла, то переходим к кадру menu.
- onClipEvent(enterFrame)- означает, что пока кадр работает, код данного клипа будет активен. Если бы событие было (load), то картинка была бы статичной, т.к. Флеш выполнил бы код только один раз при открытии флешки. А так он каждую секунду выполняет его, пока прелоадер не сделает перенаправление на другой кадр.

Если Вы хотите добавить цифровой индикатор, то нужно поместить на поле кадра Dynamic text, дать ему имя percents_text и задать align по-центру, нужный цвет, размер и местоположение.

Пример:
Дополнительно:
Можно прелоадеру добавить всякие красивости - рамку, окаймляющую полосу загрузки (как на примере выше), наложить полупрозрачные полосы или полосы цвета фона для "деления" полосы на "кусочки" или косые ромбы.

Как сделать рамку - рисуем точно такой же прямоугольник, но с рамкой и больше на 2 пикселя по ширине и высоте. Затем наводим на полосу загрузки и жмем Ctrl+стрелка_вниз, чтобы новая фигура "ушла" под бар загрузки, тогда возникает эффект, будто этот бар цельный и "наполняется" полосой загрузки.

Полоски, блики делаются аналогично, но остаются сверху бара, а им задается альфа-прозрачность (панель Color) нужной величины (например, 10%).

ВАЖНО: Как в Flash CS3 сделать загрузку прелоадера с 1%, а не 75%

Больше двух часов бился над проблемой - флеш-ролик с прелоадером не хочет отображать кадр с прелоадером, пока почти полностью не загрузится.

Проблема решается очень просто, спасибо  Rost'у с этого сайта. Нужно при Линкаже (Linkage) ВСЕХ объектов, которым он задается, УБИРАТЬ галочку "Export in first frame". Тогда первый кадр начнет отображаться, как только сам загрузится, а остальные кадры и файлы в библиотеке начнут загружаться за ним.
Это происходит потому, что первый кадр будет легким, ведь в нем только клип полоса загрузки, несколько строчек кода в этом клипе и код: stop(); у кадра.

Пример моего прелоадера в 9 мегабайт можно посмотреть здесь: Прелоадер Флеш. Сначала я не знал об этом приеме и галочка Линкажа на крупном файле в библиотеке была включена. При этом прелоадер очень долго загружался и почти не отображался, сразу переходя к второму кадру (меню). После отключения экспорта в первый кадр сначала загружается прелоадер, затем он отображает статус загрузки всего файла. Большой размер - чтобы наглядно показать процесс, т.к. на флеш-порталах многие пользователи с небыстрыми каналами, на модемах или вообще с GPRS, для них ждать без прелоадера - это 99% вероятность, что они нажмут кнопку "Назад", думая, что файл недоступен или с сайтом какой-то глюк. Поэтому не забывайте на флешки больше 300 килобайт создавать прелоадер.

Вот такой хинт для Флеш-разработчиков, работающих в Adobe Flash CS3.

Хорошее исследование гейм-девелопинга для Apple Store

Раскрываются многие моменты, с примерами и выводами по инди-разработке игр для Apple Store: http://apps4all.ru/articles/applications/dengi-i-app-store-statistika-dlya-indi-razrabotchika.html

Игра GameDev Tycoon

Прикольная игра, про разработчиков игр :)
Вы начинаете инди-разработчиком, создающим игры в собственном гараже, в одиночку разрабатывая все - и код, и графику, и звук и уровни, и сюжет и геймплей. После разработки Ваша игра издается и игровые журналы ставят свои оценки. От оценок зависят продажи - чем выше оценки, тем больше копий Вашей игры продастся.
Журналы очень привередливы и как-то случайно оценивают, по своим критериям. Я единственный раз смог получить 9,25 из 10 за фэнтези-игру в жанре квест с лучшей графикой, дизайном мира и лучшим сюжетом на своем 3D-движке.
Каждую неделю у игрока со счета списывают деньги на жизнь (коммунальные, аренда, еда и т.д.), если игровой баланс упадет ниже 50 тысяч, то игрок становится банкротом и проигрывает.

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

Я прошел только до стадии своего офиса, нанял 2-х сотрудников и выпустил около 20 игр. Но боьшой офис стоит дорого арендовать и деньги уменьшаются, особенно если разработали очередную игру, а журналы ее низко оценили и доход от игры не покрывает затраты на разработку и время, пока игра разрабатывается.

В общем, рекомендую поиграть for fun не только гейм-девелоперам, но и людям других профессий, чтобы чуть получше узнать об индустрии разработки игр.

четверг, 16 мая 2013 г.

Хинт по Flash CS3: Анимация, затем следующее действие

Язык ActionScript 2 дает большие возможности управления кадрами, клипами и их фреймами.
Например, можно создать один клип для нажимания (магический шар), волшебника (статичный) с двигающейся рукой над шаром (анимация) и при нажатии на "шар" вызывается анимация конкретного "трека" анимации "руки" и попутно анимация "шара", когда он "думает":
on(release) {
    // Вызываем анимацию руки
    _root["right_hand"].gotoAndPlay("action");
    // Вызываем анимацию шара
    this.gotoAndPlay("thinking");
}
А в треке "action" клипа "руки" в крайнем фрейме уже идет СЛЕДУЮЩЕЕ ДЕЙСТВИЕ, которое нужно показывать именно после того, как покажется анимация, такой код (после проигрывания всех кадров анимации движений "руки" над "шаром"):
// Останавливаем воспроизведение трека
stop();
// Задаем динамическому тексту otvet значение
ans = new Array("Да", "Нет", "Не знаю");
_root.otvet.text = ans[int(Math.random()*ans.length)];

В результате, при нажатии на "шар" - он начинает "думать", "рука" делать пасы над ним, а когда эта анимация пройдет - появится текст Да, Нет или Не знаю.

Как в Flash CS3 создать анимацию клипа

Чтобы создать анимированный клип, например, "волшебный шар", который при наведении на него указателя мыши будет "мигать", а при убирании указателя - станет статичным, нужно проделать следующие действия:
1. Создаем новый клип, задаем ему идентификатор, например: ball.
2. Идем в редактирование клипа (Ctrl+E).
3. На тайм-лайне добавляем пару новых KeyFrame.
4. Выделяем первый кадр и даем ему имя: normal, второму кадру даем имя: over.
5. Правой кнопкой мыши на втором кадре, вставляем еще один Keyframe.
6. Переходим на этот фрейм и редактируем (эффект "мигания" шара). Первому фрейму (normal) задаем код: stop(); (чтобы он не проигрывал фреймы дальше).
7. Если нужно, добавляем еще кадры для "трека" over и, если нужно, новые "треки" с другими именами.
8. Крайнему фрейму трека, если нужно его повторять, задаем код: gotoAndPlay("_имя_трека_");
9. Переключаемся обратно на кадр, задаем клипу код:
on(rollover) {
    this._alpha = 95;
    this.gotoAndPlay("over");
}
on(rollout) {
    this._alpha = 100;
    this.gotoAndStop("normal");
}
10. Теперь при наведении на "волшебный шар" он будет менять свой вид на фреймы из трека over, а при убирании указателя мыши - возвращаться к виду из фрейма normal.

Таким способом можно задать сколько угодно "состояний" для клипа и в нужных местах вызывать их, обращаясь к клипу _имя_ (или this, если код в самом клипе).gotoAndPlay("_имя_трека_в_клипе_");

среда, 15 мая 2013 г.

Небольшой ликбез по авторскому праву и интеллектуальной собственности для гейм-девелопера

Любая компания, выпустившая свою игру, в момент создания и публикации ее становится носителем авторского права на эту игру и ее уникальные элементы. Также геймдев-компании специально регистрируют торговые марки, защищая свою интеллектуальную собственность, например, слово "Mario" или образ персонажа Марио.

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

Начинающему разработчику игр важно понимать, что он не может взять и скопировать чужую игру, т.к. это нарушение авторских прав разработчиков той игры. Или взять музыку из Вконтакте или другой игры и использовать в своих проектах.
Однако, есть специальные места, где публикуется графика, модели, текстуры, музыка, sfx и другие ресурсы для игр, защищенные лицензиями, разрешающими использование этих ресурсов другими людьми.
4 вида лицензий являются royalty-free, то есть, начинающему разработчику игр не придется платить за их использование, это:
- CC0 - не нужно даже указывать автора, разрешается коммерческое использование.
- CC-BY 3.0 - нужно указывать автора, разрешается коммерческое использование.
- CC-BY-SA 3.0 - Тоже что и CC-BY 3.0 но нельзя использовать в коммерческих целях.
- GPL, LGPL - разрешается использование, но продукт (игра, приложение)  должен быть открытым, т.е. по первому требованию любого пользователя или прям вместе с игрой или программой распространяются исходные коды.

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

Теперь по торговым маркам и образам - единой базы для поиска нет, поэтому нужно смотреть на этих ресурсах:
http://www.uspto.gov/patents/process/search/index.jsp (окно search for patents | search for trademarks)
http://ru.wikipedia.org/wiki/Товарные_знаки,_ставшие_именами_нарицательными

Поиск по спискам трейдмарков и брендов игровых разработчиков и издателей:
http://ru.wikipedia.org/wiki/Список_торговых_марок_Sony
http://www.hasbro.com/shop/brandlist.cfm
( и т.д. по кеям _игровой_издатель_ brands, _гейм-девелопер_ trademarks) .

Чем разработка игр лучше разработки корпоративных приложений

С точки зрения инди-разработчика (одиночки или небольшой команды энтузиастов) разработка игр имеет ряд плюсов:
- самовыражение. В игре можно воплотить свои мечты и желания, создать игру из своего детства, реализовать практически все, что Вы хотите.
- ответственность. Разработчик игр ответственнен только перед самим собой и издателем, инди-разработчик ответственнен только перед самим собой. Ну и еще игровыми фанатами, которые, однако, поймут и простят разработчика, если он где-то накосячит, в отличие от корпоративных клиентов, которые:
 а) Говорят что делать, не понимая методологии,
 б) Говорят как делать, слабо разбираясь в предмете,
 в) Ебут мозги, когда сделано по их запросу, но они, оказывается хотели совсем другое!
 г) Ставят короткие сроки, а потом сами же их срывают, затягивая с элементарными действиями, которые от них требуются - подготовить материалы, графику, спецификацию и т.д.,
 д) Игра имеет шанс озолотить усердного и талантливого разработчика, тогда как корпоративные разработчики зажимают деньги, тянут с оплатой и придумывают причины, чтобы уменьшить стоимость работы, особенно, если приложения уже разработано.
- простота разработки. Простые игры, вроде "одень человечка" или "поймай шарик" создаются уже на второй-третий день после начала изучения Флеша с нуля. И всегда можно работать в нише простых игр - для детей, текстовых игр, "угадаек", "одевалок" и других игр, где минимальное количество программирования. Корпоративные же клиенты часто требуют решения нетривиальных задач, да еще дают понять, что считают, будто программист - это такой бездельник, который нажмет пару кнопок, когда вышло время дедлайна и вуаля, программа готова!
- возможность стать знаменитым и приобрести фанатов. В случае успеха игры (а успех неизбежен, если в игру вкладывается мастерство, талант, усердие и хорошая раскрутка) Вы станете знаменитым, у Вас, как создателя популярной игры, появятся фанаты (и фанатки), а также приглашения на различные игровые мероприятия, тусовки и прочие приятные вещи, вроде узнавания в реальной жизни, кучи соискателей, чтобы работать с Вами в одной команде и чувства, что Вы сделали что-то полезное для мира.

Полезные советы по программированию для Флеш-разработчика

1. Формализуйте задачу. Даже сложную задачу можно разбить на множество мелких задач, которые легко решаются.
2. Комментируйте свой код! Не нужно надеяться, что если через месяц Вы вновь будете работать с этим кодом, то все так же хорошо будете помнить. Код без комментариев отнимает очень много сил и времени на понимание его логики и структуры. Иногда вообще проще написать "с нуля", чем править свою тарабарщину в скрипте полугодовалой давности.
3. Давайте переменным и функциям осмысленные имена. Это сильно упростит читабельность кода как при разработке, так и при отладке, и при повторном возвращении к коду через какое-то время.
4. Разбивайте код на простые блоки. Лучше написать 5 простых функций для сложной задачи и легко потом отладить их по-отдельности, чем написать одну огромную функцию или вообще процедурный код и потом целый день вылавливать баги. Чем проще - тем лучше.
5. Используйте константы. Часто повторяющиеся значения, которые, к тому же, могут поменяться (разрешение экрана, количество снарядов космического корабля, имена звуковых эффектов и т.д.) лучше сделать в виде констант где-нибудь вначале кода. И если потом значение поменяется, внести изменения придется только в одном месте, а не по всему коду.
6. Используйте окно Output и функцию trace() при отладке. Это очень сильно облегчает работу над вылавливанием багов, когда консоль пишет о найденных ошибках и когда в ключевых точках стоит trace(), показывающий - выполнился определенный кусок кода или нет, своеобразные "точки контроля" в коде программы.
7. Давайте тестировать игру другим. Мышление у всех разное и другие игроки могут выловить баги, которых Вы бы не заметили. Или для них неудобно управление, распложение элементов или, например, размер цифр игровых очков. Обычно тестирование проходит в две фазы: альфа-тест, когда тестируют игру сам разработчик и его друзья и близкие, и бета-тест, когда игру тестируют посторонние люди. Даже существуют специалисты по тестированию игр и приложений, которые протестируют каждый кусочек Вашей игры и грамотно сформируют отчет о выявленных ошибках. Это сильно может помочь в выпуске финальной версии игры без багов.

Особенность загрузки флеш-ролика на компьютер пользователя

Флеш загружает ролик на компьютер пользователя по схеме: "загружаем полностью первую сцену, а затем, пока первая сцена еще "играет", загружает все остальное".
Это удобно для Флеш-мультфильмов или анимаций, но для игр, особенно когда игра большого размера, это неприемлемо, т.к. игра из первого кадра может сразу переходить на второй, третий, пятый или десятый, а тот еще не загрузился на комп = возникают тормоза и глюки.

Для решения этой задачи первым кадром в Флеш-играх всегда нужно ставить кадр с загрузкой игры. Когда кадр завершит воспроизведение, значит загружен весь ролик и можно спокойно играть в игру.
Заодно окно загрузки может являться хорошей площадкой для размещения рекламы спонсора или бренда компании, разработавшей эту Флеш-игру.

Плюсы и минусы разработки игр на Flash

Сначала минусы:
- ролик строится вокруг временной шкалы (в Adobe Flash CS3 и других версиях пакета Adobe Flash). Это удобно для создания мультфильмов и баннеров, а в играх линейной смены кадров нет (кроме кат-сцен), поэтому нужны дополнительные действия для перехода между кадрами загрузки ролика, интро, меню, уровнями, экранами победы или проигрыша, информации об игре и т.д.
- чуть более медленная работа, сравнительно с нативными приложениями. Но альтернативы в web-based играх Флешу нет, т.к. он установлен на 99% компьютеров, в отличие от того же Unity 3D или экзотического SilverLight.
- изначальная "заточенность" на 2D. Хотя кому как - например, я выбрал Флеш вместо Unity именно за то, что там именно 2D, а не 3D, как в Unity, т.к. я планирую разрабатывать именно двухмерные игры из-за того, что они легче в разработке. Но для Флеша есть и трехмерные движки, это направление быстро развивается.
 - деление на Flash for PC, Flash Lite и AIR. Если есть необходимость разрабатывать игру, работающую и на компьютерах, и на телефонах, а в игре есть функции, которые работают только в Flash for PC, то для Flash Lite (для мобильных устройств) придется выпускать другую версию. Хотя, опять же, как посмотреть - сама возможность практически одним процессом разработки выпустить игру, поддерживаемую и в веб, и на телефонах, и как исполняемое приложение (AIR) - это достоинство!

Теперь хорошее, плюсы разработки игр именно на Flash:
- быстрая разработка. Создание игры на Флеш может быть полностью завершено за несколько дней или часов. Какая другая среда разработки с серьезным языком программирования и возможностями может такое?
- поддержка большого количества форматов мультимедиа. Во Флеш-игру можно импортировать ресурсы очень многих видов - и jpg, и gif, и png, и ai, и mp3, и wav, и еще много других. Затраты времени и средств на создание игровой графики, музыки, звуков и текстур сильно экономятся, т.к. не нужно их конвертировать в какие-нибудь экзотические форматы.
- простота использования. Помимо самой среды разработки Adobe Flash CS3, познакомиться с которой можно за час-два по видеоуроку, язык ActionScript 1 и 2 является очень простым и интуитивно понятным для программирования (AS брат-близнец JavaScript). AS3 сложнее, т.к. там все на ООП, но и он проще и легче, чем многие сложные языки. Да и в Flash CS3 много возможностей настройки под свой стиль, удобные панели, в общем, есть все для хорошей и эффективной работы.
- публикация готовой игры - лучшая! После создания игры все, что нужно - скопировать на сервер SWF-файл и, если необходимо, небольшой HTML-файл, который вообще может создаваться вместе с публикацией SWF-файла. И все, никаких инсталляций, ожиданий, проверки совместимости видеокарты и шейдеров, установленных библиотек, версий операционной системы, типа процессора и прочих "прелестей" нативных игр. Просто открыть браузер и запустить игру! Или вообще скачать на компьютер\телефон SWF-файл и запускать локально, даже без подключения к Сети.
- постоянное развитие и обновление. Компания Adobe постоянно улучшает технологию Flash, уже выпущен Flash Player 11.7, язык программирования ActionScript уже третьей версии, IDE для разработки Adobe Flash уже версии CC (Creative Cloud < CS5 < CS4 < CS3 и т.д.).
- огромное коммюнити, тысячи книг, обучающих курсов, уроков, примеров, Q&A и другой полезной информации. Начинающему разработчику Флеш-игр всегда можно зарегистрироваться на крупных и активных форумах по Флешу, если он не найдет ответ на свой вопрос. А ответы есть на очень многие вопросы - как сделать то-то или то-то, решение каких-то проблем, даже полезные обзорные материалы по дальнейшей, после разработки, дистрибуции Флеш-игр и многое, многое другое!
Если сравнивать аналоги, например, тот же Unity 3D, то по нему в Рунете всего два-три активных форума, пять-шесть фан-сайтов и всего лишь пара непрофессиональных переводов книг по разработке игр на нем. Что делать начинающему разработчику, который не знает английского языка - непонятно. Он не найдет ни бумажной, ни электронной версии книги, например: "Как создать игру в Unity 3D с использованием языка программирования Boo", потому что такой книги еще нет, не написали. У других движков ситуация не лучше, поэтому Флеш, я считаю, это лучший выбор!

понедельник, 13 мая 2013 г.

Первое правило начинающего разработчика игр

Первое правило начинающего разработчика - НЕ ВЫЕБЫВАТЬСЯ.
Описание:
В обучении новым технологиям бери массовый и освоенный продукт, по которому до тебя прошли тысячи других новичков, есть выбор мануалов, уроков, книг и обучающих курсов, примеры кода и активная аудитория пользователей, на первых порах, а особенно при обучении и первые проекты после него, создавай продукты по освоенным и сотни тысяч раз пройденным схемам.

Пример:
Решил какой-нибудь парень, который знает только HTML, стать разработчиком флеш-игр. Понятное дело, нужно овладеть навыками работы в IDE, языком ActionScript и минимальными навыками графического редактора, раз уж он инди-разработчик и сам себе хозяин в команде из самого себя.

Недальновидный парень начинает ВЫЕБЫВАТЬСЯ, чтобы не быть как все. Вместо стандартного Adobe Flash CS3\CS4\или CS5 и языка ActionScript 2 для быстрого старта и по которым куча обучающих курсов, книг, уроков и примеров, он выбирает какую-нибудь экзотическую IDE для самых опытных разработчиков и не имеющую ни одной книги или обучающего курса для начинающих, самую новую и сложную версию ActionScript 3 на полном ООП, книгу Колина Мука, учащего комплексно, многосторонне, но совершенно непрактично, т.к. для человека, знающего только HTML, парадигма ООП и огромный объем информации это просто стресс и невозможность сразу вникнуть.
И вот мучается такой "умник" со своим выбором, ничего не изучив по итогу нескольких дней - недели своих мучений, потому что это как ученику школы, знающему алгебру на уровне 7 класса дать книгу по высшей математике для 5 курса студентов-математиков и сказать, мол, изучи, пойми и через неделю начинай придумывать на основе этих знаний новые математические теории.

Поэтому нужно быть проще и идти проторенной дорогой - для флеш-разработчика игр этот путь звучит так: Adobe Flash CS3 + ActionScript 2 + хорошая книга именно по РАЗРАБОТКЕ ИГР для начинающих, которые даже не знакомы с интерфейсом Adobe Flash CS3.

Удачи!

Супер-книга по обучению Flash для создания игр!

На русском языке, как раз то, что нужно начинающему разработчику Flash-игр!
Я ее скачал на комп в другом оформлении, очень интересная книга!
http://www.lessonsflash.ru/creationgames/Index0.htm

Уроки анимации:
http://www.lessonsflash.ru/animation/index.htm

А тут очень много уроков по Flash, подборка легких уроков по AS2:
http://arttower.ru/forum/index.php?act=SF&f=103&st=0&changefilters=1

Еще есть уроки по Flash на Демиарте, тоже много и хорошие, категория "игры":
http://demiart.ru/forum/index.php?act=SF&f=49
 

Виды лицензий на ресурсы для игр (графику, модели, текстуры, звуки, музыку)

Лучший вариант это CC0 Ненужно указывать даже автора.
CC-BY 3.0 Использовать без отчисленный и разрешения,но нужно указать автора.
CC-BY-SA 3.0 Тоже что и CC-BY 3.0 но нельзя использовать в коммерческих целях


CC0 (кратко)
Эта лицензия является функциональным эквивалентом публичного домена, в том, что автор отказывается от всех прав на опубликованный контент. Вы можете сделать что-нибудь с этим содержание без всяких условий, в том числе повторное лицензирование ее так, как вам будет угодно.
CC-BY 3.0 (кратко)
Эта лицензия позволяет использовать лицензионный контент в любом случае, если вы приписываете автору в порядке, определенном лицензией. Вы не обязаны делать модификации, которые вы делаете.

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

Порядок развития в Flash

Хороший тайм-лайн по развитию в Flash с нуля и до уровня разработчика игр: http://akak.ru/recipes/13890-kak-sozdat-igru-na-adobe-flash-cs5

воскресенье, 12 мая 2013 г.

Импортирование и использование графических файлов в FlashDevelop

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

Пример кода для работы с графическим файлом (файл 1.png в папка_проекта/assets/):

package
{
   import flash.display.Bitmap;
   import flash.display.Sprite;

   public class Main extends Sprite
   {
       [Embed(source="../assets/1.png")]
       private var picturePNG:Class; // присваиваем переменной picturePNG нашу картинку

       public function Main():void
       {
           // присваиваем битмапу новый экземпляр класса нашей вставленной картинки picturePNG
           var mypicture:Bitmap = new picturePNG();

           // добавляем битмап на сцену
           addChild(mypicture);
       }
   }
}

[Embed(source="../assets/1.png")] - эмбед можно вставлять в два клика, установив курсор в нужное место, затем правой кнопкой мыши на нужном файле в иерархии файлов, выбираем "Вставить embed код" - вставляется эмбед на нужный графический файл.

Создание Flash-игр

Аргументы противникам Flash: http://habrahabr.ru/post/139928/
Записки Flash гейм-девелопера: http://www.xakep.ru/post/54707/

Порядок обучения тому, как стать flash-разработчиком:
1) Знакомство со средой разработки - FlashDevelop - настройка, обучение.
2) Написание по мануалу первой игры (для поднятия мотивации).
3) Изучение ActionScript3 по книге (с ним можно двигаться дальше).
4) Изучение специализированного фреймворка Box2D (или другого) для создания 2D-игр.
5) Самостоятельное создание игр на Flash!
6) Заведение аккаунтов на порталах флеш-игр, в рекламных системах и аукционе, публикация игр в Интернете, получение дохода от игр.

Советы флешеров по старту в разработке флеш-игр: http://www.flasher.ru/forum/showthread.php?t=119318

суббота, 11 мая 2013 г.

Полезные советы по терраформированию в Unity 3D

Как на карте кисточкой Terrain Trees размещать "твердые" (Collider) деревья?
По-умолчанию создаются деревья, через которые можно проходить. Чтобы создать "твердые" деревья, через которые игрок не может пройти, нужно:
1. Перетащить на карту модель нужного дерева из Assets.
2. Задать ему Component -> Physics -> Capsule Collider.
3. Настроить Capsule Collider по контурам модели (зажимаем Shift и меняем по контурам Collider'а).
4. Создаем новый префаб: Cage Objects -> Create -> Prefab. Называем его что-то вроде: Palm (Collider).
5. В иерархии Terrain (поверхность), кисточку Trees, добавляем новую модель деревьев - нашу Palm (Collider).
Теперь все новые деревья будут "твердыми" и через них нельзя будет проходить!

Как добавить небо на карту?
1. Выделяем в иерархии объект игрока (1st person, 3rd person).
2. Выбираем Edit -> Render Settings.
3. В папках Assets выбираем Standard Assets -> Skyboxes.
4. Перетаскиваем нужный материал скайбокса в инспектор объекта на поле SkyBox Material.
5. Смотрим сцену (Play) - небо стало таким, каким нужно!

пятница, 10 мая 2013 г.

Обучающие видеоуроки по Unity 3D на русском языке

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

Сейчас я изучаю Unity по видеоурокам от Sky Games: http://gcup.ru/forum/59-29488-1

Монетизация браузерных игр

Оптимальная модель монетизации браузерных игр на сегодняшний день - это фримиум или free-to-play.
Суть фримиума в том, что юзер может играть бесплатно в саму игру, но дополнительные вещи, вроде новых уровней, игрового шмота, новых умений и т.д. - нужно покупать за игровую валюту, которая приобретается за реальные деньги.

Пример:
Есть двухмерная аркада-RPG про гнома. В игре 10 уровней, можно в нее играть бесплатно. Но последние три уровня нереально пройти без денежных вложений - нужно купить супер-меч, адамантиновую кирасу и большие склянки с зельем здоровья. В самой игре эти вещи с мобов не выпадают и не добываются.
Сделано это для того, чтобы игроки, пройдя 7 уровней и "подсев" на игру, хотели пройти дальше, но игровой баланс построен так, что на 8, 9 и 10 уровнях зомби в два раза больше и невозможно пройти уровень без тех вещей, о которых я написал выше.

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

В общем, вот такая ситуация по монетизации браузерных игр на сегодня.

четверг, 9 мая 2013 г.

Полезные материалы по Unity 3D

Информация о Unity 3D в Википедии:
http://ru.wikipedia.org/wiki/Unity_%28%D0%B8%D0%B3%D1%80%D0%BE%D0%B2%D0%BE%D0%B9_%D0%B4%D0%B2%D0%B8%D0%B6%D0%BE%D0%BA%29

Сравнение работы Adobe AIR vs Unity 3D:
http://blog.codestage.ru/ru/2013/03/20/air-vs-unity3d/ (Unity 3D "рвет" AIR)

Скачать Unity 3D:
http://unity3d.com/unity/download/

Регистрация в Unity 3D:
При запуске программы появится форма регистрации, ее заполнить.

Бесплатный редактор 3D-графики Blender:
http://www.blender.org/download/get-blender/

Отличия Pro версии Unity от Free версии:
В бесплатной (Indy) версии Unity 3D нет некоторых опций, вроде динамических теней, мешей, аудио-фильтров и еще нескольких навороченных штук, которые, в принципе, и не нужны начинающему разработчику игр.
Единственное требование к фри-версии - если игра, созданная на ней продастся в сумме более чем на $100 000, то нужно будет купить лицензию (заплатить всего $1500 при заработке $100 000 - это совсем несложно).
Также, если нужны специальные опции, вроде командной разработки (Asset Server), лицензии под Adobe Flash Player, iOS, Android, приставки Wii, Xbox, PS3 и другие платформы, а также исходные коды, то это за отдельные деньги.
Но и бесплатной версии Unity для начинающего или инди-разработчика игр хватит полностью!
А если к этому добавить бесплатный редактор 3D-моделей Blender, бесплатный растровый редактор GIMP для 2D-графики, бесплатный аудио-редактор Audacity и другой нужный софт OpenSource, то никаких затрат для старта в разработке игр, кроме компьютера, времени и желания развиваться вообще не стоит! Самое главное - чтобы было желание и стремление создавать игры.

Преимущества браузерных игр

На сегодняшний день в мире игр есть несколько основных платформ, это:
- компьютеры (исполняемые приложения),
- приставки (ромы, образы и картриджи),
- устаревающая J2ME и Symbian40\60\90,
- iOS, Android, BlackBerry, WinMobile,
- web-based игры.

Если игры для первых 4 платформ могут выполняться только на той платформе, для которой они разработаны, то web-based игры и приложения - на любой платформе, где есть браузер.

Пример:
Игра для компьютера - будет работать только на компьютере (причем, еще идет разделение на Win, Mac и Linux).

Игра для Android в APK - может быть запущена только на устройствах с Android.

Браузерная игра (web-based, "размещенное в web") - запустится практически на любом устройстве, главное, чтобы был браузер. Это и компьютер, и смартфон, и планшет, и даже Гугл.Очки, если там будет браузер и доступ к Сети!

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

Поэтому я и выбрал для своей деятельности в геймдеве именно направление, связанное с web.

Пилотная запись

Это первая запись в моем блоге Web-GameDev, в котором я буду:
- собирать полезные для геймдева вещи,
- писать свои заметки и мысли по геймдеву,
- сохранять линки, картинки и другую информацию.

Данный блог создан мною как вспомогательное средство в моем развитии, как игрового разработчика.
Желаю себе успехов и удачи! :)