CitrusGame Engine – быстрая и удобная кроссплатформенная разработка для мобильных устройств на примере платформера - Возможности, общий workspace, профилирование кода - Анимация героя, врагов; - Работа с физикой; - Создание и управление уровнями; - Эффекты Particle Systems; - Плюсы/минусы, советы к использованию.

1. CitrusGame Engine
Быстрая и удобная
кроссплатформенная
разработка для мобильных
устройств на примере
платформера
Шумовский Юрий
Разработчик игр, http://mobgamedev.com
yurij.shumovskij@gmail.com

2. Требования к порту игры
«Конек-Горбунок»
Игровой автомат
Быстро
Дешево
Кроссплатформенно
iPhone
iPad
Аndroid
web

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

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

5. 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 и прочее

6. Starling
Starling
Stage3D
OpenGL, OpenGL ES 2.0, Direct3D
GPU
iPhone, Android…

7. … extends StarlingCitrusEngine
super.handleAddedToStage(e);
Starling.multitouchEnabled = true;
setUpStarling(true, 0);
import citrus.objects.platformer.box2d.Hero;
… extends CitrusEngine
state = new Away3DGameState();
import citrus.objects.platformer.nape.Hero;

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

9. 1x
Решение 1.
Свои наборы графики
под каждое разрешение
(1x, 1.5x, 2x, 4x, 5x)
1.5x
_baseWidth = 480;
_baseHeight = 320;
_viewportMode = ViewportMode.FULLSCREEN;
_assetSizes = [1, 1.5, 2, 4, 5];
2x
4x
Assets.assets = new AssetManager
(scaleFactor);
Assets.assets.enqueue("multiresolutions/assets" +
caleFactor + "x.png");
Assets.assets.enqueue("multiresolutions/assets" +
caleFactor + "x.xml");
scaleFactor – вычисляется автоматически

10. …но есть один недостаток
базовый размер для Android
все разрешения
не нарисуешь, а при
FULLSCREEN видно как
растягивается графика

11. Решение 2.
1) Используем base_width, base_height.
2) ScaleFactor считаем сами
3) Добавляем мертвые зоны +
маштабирование максимальной графики
Смещение по Y задаем вручную
switch(stage.fullScreenHeight){
case 480:
yOffset = 160;
break;
case 500:
yOffset = 130;
break;
case 512:
yOffset = 130;
break;
….
var scaleYNormal:Number =
Math.round(stage.fullScreenHeight/(BASE_HEIGHT));
if (scaleYNormal < 2) {
scaleYNormal = 2;
}
var scaleOriginal:Number =
(stage.fullScreenHeight/BASE_HEIGHT)/scaleYNormal;

12. Анимация в Citrus Engine
Атласы
(сиквенция картинок)
Анимация в SWF файле +
RUNTIME rendering
Скелетная анимация с
Dragon Bones

13. Использование Атласа
Атлас собираем с отдельных картинок
помощью
http://www.codeandweb.com/texturepacker
[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>
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;

14. Анимация в SWF файле +
RUNTIME rendering
При запуске, с каждого кадра анимации создается
BitmapData

15. Скелетная анимация с
Dragon Bones
Texture.png
<XML>
skeleton.xml
<XML>
texture.xml

16. Particle Systems

17. Как создавать
particle systems
http://onebyonedesign.com/flash/particleeditor/
Настраиваем визуальные
параметры
particle.pex
texture.png
particleArt = new PDParticleSystem(particleXML, texture);
particleArt.start();
flame = new CitrusSprite("flame",{view:particleArt});
add(flame);
Экспортируем в XML +
texture
Используем в коде

18. Физика в Citrus Engine

19. Не стоит писать свой код
обработки столкновений.
Доверьтесь Box2D
var pika2:Sensor = Sensor(getObjectByName
("pika2"));
pika2.onBeginContact.add(onPikaHandler);

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

21. Редакторы уровней
1. mapeditor
2. GLEED2D - Generic Level Editor 2D,
3. FlashIDE (используют даже HTML5 программисты)

22. Редакторы уровней ,
используя Flash IDE
ObjectMaker2D.FromMovieClip(level);

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

24. The end
Благодарю за внимание!