Быстрая и удобная
кроссплатформенная
разработка для мобильных
устройств на примере
платформера
CitrusGame Engine
Шумовский Юрий Разработчик игр, http://mobgamedev.com [email protected]
Требования к порту игры «Конек-Горбунок»
Быстро
Дешево
Кроссплатформенно
Игровой автомат
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
Благодарю за внимание!