Быстрая и удобная

кроссплатформенная

разработка для мобильных

устройств на примере

платформера

CitrusGame Engine

Шумовский Юрий Разработчик игр, http://mobgamedev.com yurij.shumovskij@gmail.com

Требования к порту игры «Конек-Горбунок»

Быстро

Дешево

Кроссплатформенно

Игровой автомат

iPhone

iPad

Аndroid

web

Выбираем Кроссплатформенное решение

Выбираем Кроссплатформенное решение

Citrus game engine: что это, что в нем полезного и из чего состоит?

Citrus это:

Display frameworks (2D, 3D)

Physics frameworks

Multi resolution solution

Level manager

Sound manager

Gamepads

Camera system

Архитектура игры готовая к

применению

Игровые примитивы (Hero, Enemy,

Coin, MovingPlatform, Sensor, Teleport,

Cannon и прочее

Starling

Starling

Stage3D

OpenGL, OpenGL ES 2.0, Direct3D

GPU

iPhone, Android…

… extends StarlingCitrusEngine … extends CitrusEngine

super.handleAddedToStage(e);

Starling.multitouchEnabled = true;

setUpStarling(true, 0);

state = new Away3DGameState();

import citrus.objects.platformer.box2d.Hero; import citrus.objects.platformer.nape.Hero;

Организация графики

Решение 1. Свои наборы графики под каждое разрешение (1x, 1.5x, 2x, 4x, 5x)

_baseWidth = 480;

_baseHeight = 320;

_viewportMode = ViewportMode.FULLSCREEN;

_assetSizes = [1, 1.5, 2, 4, 5];

Assets.assets = new AssetManager

(scaleFactor);

Assets.assets.enqueue("multi-

resolutions/assets" +

caleFactor + "x.png");

Assets.assets.enqueue("multi-

resolutions/assets" +

caleFactor + "x.xml");

scaleFactor – вычисляется автоматически

1x

1.5x

2x

4x

…но есть один недостаток

базовый размер для Android

все разрешения

не нарисуешь, а при

FULLSCREEN видно как

растягивается графика

1) Используем base_width, base_height.

2) ScaleFactor считаем сами

3) Добавляем мертвые зоны +

маштабирование максимальной графики

var scaleYNormal:Number =

Math.round(stage.fullScreenHeight/(BASE_HEIGHT));

if (scaleYNormal < 2) {

scaleYNormal = 2;

}

var scaleOriginal:Number =

(stage.fullScreenHeight/BASE_HEIGHT)/scaleYNormal;

switch(stage.fullScreenHeight){

case 480:

yOffset = 160;

break;

case 500:

yOffset = 130;

break;

case 512:

yOffset = 130;

break;

….

Смещение по Y задаем вручную

Решение 2.

Анимация в Citrus Engine

Атласы

(сиквенция картинок)

Анимация в SWF файле +

RUNTIME rendering

Скелетная анимация с

Dragon Bones

Атлас собираем с отдельных картинок

помощью

http://www.codeandweb.com/texturepacker

var ta:TextureAtlas = new

TextureAtlas(Texture.fromBitmap(new

heroAnimBitmap()),XML(new heroAnimXML()));

var animationSeq:AnimationSequence = new

AnimationSequence(ta,["walk","idle",

"jump"],"idle",24);

hero.view = animationSeq;

[Embed(source="/../embed/games/hungryhero/g

raphics/mySpritesheet.png")]

public static const AtlasTextureGame:Class;

[Embed(source="/../embed/games/hungryhero/g

raphics/mySpritesheet.xml",

mimeType="application/octet-stream")]

public static const AtlasXmlGame:Class;

Использование Атласа

<XML>

Анимация в SWF файле + RUNTIME rendering

При запуске, с каждого кадра анимации создается BitmapData

Скелетная анимация с Dragon Bones

Texture.png

<XML>

skeleton.xml

<XML>

texture.xml

Particle Systems

Как создавать particle systems

Настраиваем визуальные

параметры

Экспортируем в XML +

texture

Используем в коде

http://onebyonedesign.com/flash/particleeditor/

particle.pex

texture.png

particleArt = new PDParticleSystem(particleXML, texture); particleArt.start();

flame = new CitrusSprite("flame",{view:particleArt}); add(flame);

Физика в Citrus Engine

Не стоит писать свой код обработки столкновений. Доверьтесь Box2D

var pika2:Sensor = Sensor(getObjectByName

("pika2"));

pika2.onBeginContact.add(onPikaHandler);

Создание и управление уровнями

Редакторы уровней

1. mapeditor

2. GLEED2D - Generic Level Editor 2D,

3. FlashIDE (используют даже HTML5 программисты)

Редакторы уровней , используя Flash IDE

ObjectMaker2D.FromMovieClip(level);

Плюсы/Минусы в Citrus Engine

Плюс

Плюс

Плюс

Минус

Минус

Минус

The end

Благодарю за внимание!