Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CitrusGame Engine
Быстрая и удобная
кроссплатформенная
разработка для мобильных
устройств на примере
платформера

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

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

Быстро
Дешево

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

iPhone
iPad
Аndroid
web
Выбираем
Кроссплатформенное
решение
Выбираем
Кроссплатформенное
решение
Citrus game engine:
что это, что в нем полезного
и из чего состоит?
Citrus это:
Display frameworks (2D, 3D)
Physics framew...
Starling

Starling
Stage3D
OpenGL, OpenGL ES 2.0, Direct3D

GPU
iPhone, Android…
… extends StarlingCitrusEngine
super.handleAddedToStage(e);
Starling.multitouchEnabled = true;
setUpStarling(true, 0);

im...
Организация графики
1x

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

1.5x
_baseWidth = 480;
_baseHeight = 320;...
…но есть один недостаток
базовый размер для Android
все разрешения
не нарисуешь, а при
FULLSCREEN видно как
растягивается ...
Решение 2.
1) Используем base_width, base_height.
2) ScaleFactor считаем сами
3) Добавляем мертвые зоны +
маштабирование м...
Анимация в Citrus Engine

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

Анимация в SWF файле +
RUNTIME rendering
Скелетная анимация с
Drago...
Использование Атласа
Атлас собираем с отдельных картинок
помощью
http://www.codeandweb.com/texturepacker

[Embed(source="/...
Анимация в SWF файле +
RUNTIME rendering

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

Texture.png
<XML>
skeleton.xml
<XML>
texture.xml
Particle Systems
Как создавать
particle systems
http://onebyonedesign.com/flash/particleeditor/

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

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

var pika2:Sensor = Sensor(getObjectByName
("pika2"));
p...
Создание и управление
уровнями
Редакторы уровней

1. mapeditor

2. GLEED2D - Generic Level Editor 2D,

3. FlashIDE (используют даже HTML5 программисты)
Редакторы уровней ,
используя Flash IDE

ObjectMaker2D.FromMovieClip(level);
Плюсы/Минусы в Citrus Engine

Плюс

Минус

Плюс

Минус

Плюс

Минус
The end

Благодарю за внимание!
Upcoming SlideShare
Loading in …5
×

Citrus Game Engine, Юрий Шумовский

2,647 views

Published on

CitrusGame Engine – быстрая и удобная кроссплатформенная разработка для мобильных устройств на примере платформера

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Citrus Game Engine, Юрий Шумовский

  1. 1. CitrusGame Engine Быстрая и удобная кроссплатформенная разработка для мобильных устройств на примере платформера Шумовский Юрий Разработчик игр, http://mobgamedev.com yurij.shumovskij@gmail.com
  2. 2. Требования к порту игры «Конек-Горбунок» Игровой автомат Быстро Дешево Кроссплатформенно iPhone iPad Аndroid web
  3. 3. Выбираем Кроссплатформенное решение
  4. 4. Выбираем Кроссплатформенное решение
  5. 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. 6. Starling Starling Stage3D OpenGL, OpenGL ES 2.0, Direct3D GPU iPhone, Android…
  7. 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. 8. Организация графики
  9. 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. 10. …но есть один недостаток базовый размер для Android все разрешения не нарисуешь, а при FULLSCREEN видно как растягивается графика
  11. 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. 12. Анимация в Citrus Engine Атласы (сиквенция картинок) Анимация в SWF файле + RUNTIME rendering Скелетная анимация с Dragon Bones
  13. 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. 14. Анимация в SWF файле + RUNTIME rendering При запуске, с каждого кадра анимации создается BitmapData
  15. 15. Скелетная анимация с Dragon Bones Texture.png <XML> skeleton.xml <XML> texture.xml
  16. 16. Particle Systems
  17. 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. 18. Физика в Citrus Engine
  19. 19. Не стоит писать свой код обработки столкновений. Доверьтесь Box2D var pika2:Sensor = Sensor(getObjectByName ("pika2")); pika2.onBeginContact.add(onPikaHandler);
  20. 20. Создание и управление уровнями
  21. 21. Редакторы уровней 1. mapeditor 2. GLEED2D - Generic Level Editor 2D, 3. FlashIDE (используют даже HTML5 программисты)
  22. 22. Редакторы уровней , используя Flash IDE ObjectMaker2D.FromMovieClip(level);
  23. 23. Плюсы/Минусы в Citrus Engine Плюс Минус Плюс Минус Плюс Минус
  24. 24. The end Благодарю за внимание!

×