HTML5 Phaser ECMAScript 6

Часть 12: Редакторы сцен для Phaser и как их не надо создавать

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

Перед тем как начинать разработку интерфейса программы, я нашел несколько редакторов сцен: Phaser Editor и MightyEditor. К сожалению ни один не подошёл, так как их функционал не ограничивался только созданием сцены. Вместо этого, я должен был писать весь код игры в этом редакторе, а это значило отказ от классов, автокомпиляции, обфускции, удобного PhpStorm редактора и главное проверенного рабочего места на базе grunt.

Оставался еще один кандидат — Tiled, который на самом деле используется для генерации карт платформеров а не сцен.

ОФФТОПИК: как-то очень давно отдыхал в Египте, номер достался с скидкой, но что бы хоть как то сэкономить, администрация отеля забрала пробку из ванны, что бы постjялци не использовали много воды, а в Египте она не дешевая. Но чем отличается русский от буржуя? Конечно смекалкой: я взял носок, скрутил, заткнул дырку и с комфортом принимал ванну каждый день =)

Также я решил поступить и с Tiled редактором. Я обнаружил, что при создании карты, есть возможность создавать дополнительные слои для спраитов (враги, главный герой, монетки и т.д.) Прочитав немного документации, узнал что при добавлении графики на карту, можно вместо статичного спраита, подсунуть свой класс созданный на базе спраита. А это давало мне возможность, создать любой сложный элементы интерфейса и автоматически размещать его на «карте» (для нас сцена с одним фиксированным экраном). Чуть сложней оказалось достать указатель на созданный элемент, но проанализировав исходников Phaser, я нашел подходящий метод, который находил элемент на слое по его уникальному имени.

Когда я уже начал кодить. Мне пришлось отказаться от создания элемента интерфейса на базе Sprite, вместо этого я использовал Group (об этом решение можете почитать в 10 части) . По этому, я уже не мог использовать карты tile map сгенерированные в Tiled для добавления элементов интерфейса.

ПРАВКА: позже я познакомился с Phaser.Button классом и у меня появилось предположение, что Skill класс все же можно сделать на базе Phaser.Image, так как сами кнопки сделаны на его основе. А кнопки в свою очередь поддерживают добавления несколько спраитов или даже текстов в кнопку (в виде child-а).

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

определение координат элементов интерфейса в Photoshop

Ужасающе не так ли? Любая среда разработки, позволяет упорядочить элементы интерфейса аккуратно, но ведь у Phaser-а ее нет! Попробовал указать фиксированные координаты каждому элементу интерфейса, но это явно не подходит перфекционистам вроде меня… В следующем посте я расскажу как я чуть не изобрел велосипед и все же решил проблему расположения кнопок и их анимации =)

10 thoughts on “Часть 12: Редакторы сцен для Phaser и как их не надо создавать

  1. Я обнаружил, экспериментальным путем, что можно параллельно редактировать файлы в Phaser Editor и WebStorm (брат-близнец PhpStorm) — и файлы корректно обновляются в редакторах. Разумеется, если работать только с кодом за пределами маркеров автогенерации

    Вчера так работал, вроде норм. Вообще оказалось, что удобнее все же работать в редакторах от Intellij — все остальные по мощности автоподсказок и навигации и рядом не лежали. Кроме того, на Java я тоже пишу в IDEA от Intellij, так что IDE от этой компании у меня вне конкуренции

    Вообще оказалось, что Phaser Editor только удобен для быстрого старта и наброска сцен, а для основной работы лучше WebStorm / PhpStorm. Тут я с тобой согласен полностью.

  2. PS: в Phaser Editor есть кнопки для align элементов
    результатом, конечно, будет точное позиционирование по числам в коде, но если размер сцены не меняется — это все равно, что и программно выравнивать в коде

  3. Для меня лично у редакторов есть еще один маленький минус. Я не разбирал синтаксиса наследования через прототип. Теоретически я знаю как это делать, но не уверен как практически красиво это реализовать.

    Вот к примеру надо сделать «класс» (в случае JS5 это объект с свойствами), на базе другого «класса» (объект Sprite). Как это будет выглядеть практически в Phaser?

    NewSprite = function(game, x, y, size) {
    }
    NewSprite.prototype = Object.create(Phaser.Sprite.prototype);
    NewSprite.prototype.constructor = NewSprite;

    А как вызвать конструктор родителя — super? Из примеров вроде надо делать:

    Phaser.Sprite.call(this, game, x, y, 'my_class_sprite');
    // тут наш код класса
    game.add.existing(this);

    А как ты делаешь? Мне надо попробовать Intellij, так как PhpStorm при работе через grunt глючит. Он самостоятельно включает в проект всю папку node_modules, хотя в дереве проекта, папка помечена как excluded. Позже я нашел заглушку, но увы, теперь не все подсказки отображаются.

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

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

  4. С наследованием не разбирался.

    Intellij — это компания, которая делает PhpStorm, WebStorm, IDEA и другие похожие редакторы.

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

  5. И правильно делаешь! У меня даже на сами попытки найти правильный подход генерации элементов интерфейса и их расположения уже ушло столько времени. Но даже отрицательный опыт, это тоже опыт. До сих пор я пытался делать интерфейс по принципу адаптивного дизайна. Но теперь поняв возможности Phaser решил использовать абсолютное позиционирование.

    Но это еще не все… я заметил недостатки JavaScript 6. При всем том, что это попытка сделать из JavaScript полнофункциональный ООП язык, нет возможности создать константы класса или даже просто приватные методы 🙁 В JavaScript 5 я умею эмулировать поддержку приватных методов и даже синглетон. По завершению проекта, возможно сделаю полный рефакторинг кода.

    А как у тебя с использованием Phase Editor-а? Получилось ли реализовать весь интерфейс или пришлось отказаться от некоторых решений?

  6. Hi guys!

    Phaser Editor author here 🙂

    Sorry I write here in english, I just trust on Google Translate for read.

    As ВитринныйКапчеРобот said, you can use Phaser Editor together with the text editor of your choice. Actually we wrote a post about to use Phaser Editor + Sublime Text, because this interoperability is a key feature for us.

    http://phasereditor.boniatillo.com/blog/2015/11/phaser-editor-with-sublime-text

    It is a bit old but the main concept remain. Just take a look to the scene editor documentation and respect the zones where you can insert your own code. By default Phaser Editor should refresh the project each time there is an external change.

    The same with build tools, you can use Grunt and things like that externally. So it is fine if you see Phaser Editor as a Phaser asset manager/scene maker tool.

    In relation with the JavaScript inheritance, Phaser Editor supports TypeScript code generators, so maybe that language is more suitable for you. The JS6 generators are ready for the next release (very soon).

    To edit TypeScript on Phaser Editor you can read this post:
    http://phasereditor.boniatillo.com/blog/2017/04/welcome-typescript-ide
    That tool uses TypeScript Server from Microsoft, it is a good tool, and we are going to include it built-in in a near future.

    Regarding the absolute positioning of objects, it is the way Phaser does, but it is not a bad idea to have layout managers on Phaser, maybe you can suggest it to the Phaser developers in this group:

    https://groups.google.com/forum/#!forum/phaser3-dev

    That’s great that you guys are evaluating the editor. Any feedback is always welcome!

    Arian

  7. Hello Arian,

    You are reading a bit outdated information =) I decided to make a blog as a diary to log my progress and share it with other developers, who may also want to join game development industry. That means, when I created this post I was thinking to do dynamic layout using CSS3 Flex logic, I even created a class and it worked fine but there was an issue related to group margin, which simply does not exist (group size is already reset by its bounds() method).

    Arian, in addition ECMAScript 6 language does not have private methods. I cannot access class by string name since they are not added to window global variable. I cannot even create object with array arguments passed to constructor… I was able to do all these in ECMAScript 5, so then what’s the reason of moving to ECMAScript 6? The only advantage left is «import»… however, I am not sure that it will not cause me some issues in future.

    According to my latest post about Tiled. I used Tilemap to create interface. So far so good but it also has limitations. Looks like creating game is not just about writing a code, but it’s about developing new abilities/strategies to solve certain problems. Arian, since you are developer of Phaser Editor, you should have great experience in creating games. May I ask you: how one can implement «level selection map with scrolling» using Phaser Editor?

    Phaser Editor will allow me to create one single stage. Currently my screen contains only 5 levels to choose. However, there are 80 more… or 16 screens. Should I create them in advance outside of stage in editor, or should I simply clone the one I created? I googled but cannot find a way to clone a group (which contains level buttons). Any tip?

    Thanks in advance for you time Arian, we will all wait for new version of your tool.

  8. Hello Андрей,

    For some reason I did not receive the notification of your reply 🙁

    > …in addition ECMAScript 6 language does not have private methods

    Yes, but I think in JS5 you cannot create private methods neither. You can simulate them as probably you can simulate it on JS6. In any case I don’t see an issue with it unless your goal is to create an API or something like that to be used by other developers. But for a game dev I think it is not a real problem.

    > I cannot access class by string name since they are not added to window global variable

    Yes I did a test and it is right. I guess you can create a your own global object and map the classes you are interested in your self.

    > I cannot even create object with array arguments passed to constructor…

    I think you can, try this:

    class A {
    constructor(…args) {
    console.log(args);
    }
    }
    new A(1, 2, 3);

    > I used Tilemap to create interface. So far so good but it also has limitations. Looks like creating game is not just about writing a code, but it’s about developing new abilities/strategies to solve certain problems.

    You are right, and even you will need to create your own tools. It think it just depends on the games you are developing. General tools like Tiled, Phaser Editor and even the super Unity3D are fine for general games development, but games are something that need to be optimized in extreme or are creative in extreme and often you find yourself hacking the engine (or writing your own engine) or writing your own tools to create the maps, etc… For that reason we prefer in Phaser Editor to generate the code and use Phaser formats, because it is more easy to hack. In a future we should provide ways to customize the code generators so you can chain your own patterns or tools.

    > Arian, since you are developer of Phaser Editor, you should have great experience in creating games.

    Hehe not really! I have experience making tools but not too much making games, for that reason I love/need so much the user feedback.

    > May I ask you: how one can implement «level selection map with scrolling» using Phaser Editor?

    What I recommend is first to ask yourself how you can do «level selection map with scrolling» with Phaser. As soon as you have the answer then you can ask how to make it with the Phaser Editor scene maker and if it is suitable. For example, there are games where is much better to create the scene on the fly (for example Flappy Birds), I think it is called «procedural generation».

    Is this what you want to do:

    http://www.emanueleferonato.com/2015/01/21/create-an-html5-level-selection-screen-using-a-scrollable-map-like-in-hero-emblems-game-using-phaser/

    Where more help the Phaser Editor scene maker is in the creation of the objects. If you look on the «create» method of that example, you will see that it is very simple, it is just about to add the map image on the background and create a mapGroup with the «town» sprites on it. So that part can be do with the scene maker, the rest of the stuff should be «written by hand».

    > Phaser Editor will allow me to create one single stage

    I don’t understand why you say it. In Phaser Editor you can create all the scenes you need. Even in recent versions you can create prefabs of sprites and groups. Just create a Phaser Example Project with the «Friend of Cuco (multi-level platformer)» template.

    > Currently my screen contains only 5 levels to choose. However, there are 80 more… or 16 screens. Should I create them in advance outside of stage in editor, or should I simply clone the one I created? I googled but cannot find a way to clone a group (which contains level buttons). Any tip?

    I do not understand very well what you need, but I guess you can add everything to a big scene and just scroll the camera. Again, just think on how you can do it with Phaser, then look if Phaser Editor, or a scene maker, is going to help.

    I do not understand why you need to clone a group. I think in Phaser it is not possible. In any case you can create prefabs and create new instances.

    I hope I helped a bit 🙂
    Thanks you for the feedback! I do not have time to develop real games so I try to keep in touch with the users. So please keep in contact 🙂

  9. Hello Arian,

    That’s the point that I can simulate private method and even implement singleton pattern which I cannot do in ECMAScript 6. Of course using _ as prefix makes it clear that method is private and should not be used but the fact that JS6 should be OOP standard but does not support private methods makes no sense to me. As for passing args to constructor:

    var sprite = Object.create(CLASSES[object.type].prototype);
    CLASSES[object.type].apply(sprite, args);

    Regarding your tool Arian — call me old fashioned but I do not trust code generators or frameworks. I like jQuery, Phaser, Smarty because it’s single file but at the same time I will never ever use jQuery UI, Lumen, Zend and etc… because they are HUGE. Shortly, let me explain why I like Tiled for now… that small tools does only one job, creates stage, exports it to JSON format. I have full control when that stage will be used and how. I can load it and create objects with one or two lines of code. I would add some more features to make it more useful but I am developer and you are the one who creates tools =)

    So Arian, why you do not want to add option to export stage as JSON file? In addition to regular options, you can allow users to set events which should be fired on certain events. Later, developer could create stage based on that JSON file when needed. Your stage constructor class can set proper listeners for events (click, hover, destroy, hide and etc) and call function names which was set in object properties in editor. Editor should not be bothered if such functions exist Arian, developer will take care of it. That way your tool will be helpful not only for beginners but for advanced developers too.

    As for menu, I finished it. You can check app here. Currently I am working on game stage… this time I have different issue. The amount of objects is not fixed but I do not want to create them dynamically from the code.

    Waiting for your reply Arian

    p.s. sorry for email report, I fixed that… there was issue with default settings of phpmailer for wordpress

  10. Hi Андрей,

    Good that you finished the demo.

    In relation to Tiled, sure, every developer has its style and preferences, and Tiled is a very popular tool with good support in the Phaser community. Actually, in a future release we should add support to Tiled formats in our editor. Note if you want to layout a menu screen or something like that Tiled is not a good choice, a combination of Phaser Editor (scene editor) and Tiled should be more friendly, like it happens with Unity Editor, that you can create the UI in Unity and the maps in Tiled. Tiled is for create maps, not scenes, actually it is not very useful for games like Angry Birds.

    Anyway, at the moment to generate a JSON with the scene data is not an option for us, because Phaser does not support it, so in the case we want to generate JSON then we have to develop a Phaser plugin to parse it, something that is out of our philosophy of support just plain Phaser. The code generators were the best solution we found, because you don’t need any special plugin or runtime. In Phaser 3 they are working on JSON serialization so we plan to support it too and developers will be able to generate code or generate JSON.

    For the moment in Phaser Editor you can just create Group prefabs, so you will be able to add them to the stage whenever you want and set the properties you want. Just make public the objects you need to access from the outside of the group.

    I am receiving the mails, thanks.

    Thanks for your reply,
    Arian

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *