Arian Fornaris

Members
  • Content count

    174
  • Joined

  • Last visited

  • Days Won

    2

Everything posted by Arian Fornaris

  1. I think the wiki is something that can be maintained by the community, and we let the phaser devs to concentrate on phaser development. Fortunately there are a lot of tutorials that help to start and the phaser devs are very reachable on the social channels. What I miss is the Interphase magazine, I think an Interphase issue to welcome Phaser v3 when it is ready will be great.
  2. I had the same question... I found in the Phaser code that you can use it in this way: var game = new Phaser.Game(..., { arcade : true });
  3. Are you loading the 'player' asset as spritesheet or image?
  4. There is a sublime text plugin: https://github.com/boniatillo-com/PhaserSublimePackage If you are fine with commercial products you can try Phaser Editor (http://phasereditor.boniatillo.com) it has lot of project templates (between other nice features). You can evaluate it for 15 days. (I am the author of both)
  5. Mmm.. please in main menu click `View > Show Console` and tell me if you see a message like: ``` reloading plugin tern_for_sublime.tern ``` Also please check in menu Tools at the end there is a Tern sub-menu.
  6. Hi, This is something that many of you are requesting for a while: an auto-completion plugin for Sublime Text. Checkout it: https://github.com/boniatillo-com/PhaserSublimePackage It was tested on Sublime Text 2 and 3, I just released it so if you have any issue put a comment here or open an issue in github. This is something nice to do while we wait for the next Phaser release to deliver a Phaser Editor update ;-) Remember Phaser Editor is a very nice complement to Sublime Text. Have fun coding!
  7. Hi, you can check the version of the `phaser.js` provided by Phaser Editor in the Chrome dev console: Or in the editor you can check the Project libraries: To be sure you do not have things in cache you always can disable it in the Networks section of the Chrome DevTools.
  8. Yes :-)
  9. Hi @TonyZPW Few days ago we bought a mac mini to develop the Mac version, but yet we have to wait for someone to bring it to us here in Cuba, it can take a month but who knows, maybe the next release of Phaser Editor will come with the Mac version. Keep in touch.
  10. Hi, I just see this thread now. > Is there a way to import this into a texture atlas generator file? Mmm... I think there is not a way to do it. The atlas generator needs the source images. However please feel free to create an issue in the github page of the editor: https://github.com/boniatillo-com/PhaserEditor/issues Maybe in the future we can implement a texture splitter (importer) or something like that.
  11. Hi, just to point that Phaser Editor is not developed or supported by PhotonStorm, else by an independent team. The Phaser team just sell the editor and publish the major news.
  12. Great it is working! Look that probably you would like to exclude the lib content from the jsconfig.json project. The Phaser completions are computed from the d.ts definitions.
  13. Hi, I did a test some days before and it just worked Just follow these steps: 1- Open a folder in VSCode 2- Create a `jsconfig.json` file at the root of that folder. That file indicates to VSCode that it is a JavaScript project. Just put inside that file this content: { } 3- Create a `defs` folder and copy there the Phaser typescript definitions. I just named it `defs` but you can use your own name. 4- Create a new `game.js` file and write some code there, it should auto-complete the Phaser API. I think VSCode uses the TypeScript tooling also to develop JavaScript, but with a type inference engine called Salsa. If you have any issue tell me.
  14. Hi Rich, The philosophy we follow with Phaser Editor is always to support the latest official release of Phaser. And we mention that if Lazer is going to replace Phaser we are going do the same. The key is the "official" word. If PhotonStorm will officially support both projects, then we are going to support both too, probably as separated products because to keep both in the same application will increase the size of it too much, just look that we bundle all the examples that are an important number of megabytes. Sure it could take some time to adopt the new Phaser v3 or Lazer but we see on it a great opportunity for us, to be one of the first editors to support the new super Phaser3/Lazer from the beginning About the name I don't know yet what to do. I used Phaser Editor to name the current editor but after some time I realized it was not a nice name because people can get confused about if it is a PhotonStorm product or not, so probably I will use other name, like... Lazer IDE? hahaha.. is joke, I was thinking something related to Reflection because the editor has a lot of Phaser reflection (metadata inspection) and it is a word related to the Light too. Thanks for ask!
  15. Hi @rich I think you love Phaser and I honestly don't see a real need to change of name (unless you are worry about that question of the rights of the movie). You can call it Phaser v3 no matter how much internal changes it has or if you are using webpack, ES6 or typescript, or if it supports 3D. What is Phaser? I see the answer is more about what users can do with it and how. Is common to see how technologies change so much but the name remains, just take a look to Windows 3.11 vs Windows 10. I don't code in python too much these days, but years ago Python 3 was a massive change internally and externally: they did not change the name. Actually there is this sequence of C, C++ and C#! Why not a Phaser v3? Phaser v3 is getting a lot of exciting features and the Phaser team is working with pleasure, it is a good sign. There are time to migrate it to ES6 later, I think.
  16. Hi! We just released a new Phaser Editor version (1.3.0) Updated to the latest Eclipse version (Neon.1): Performance improvements and much more. Eclipse Marketplace Client: to install third party plugins, like EGit. We are evaluating the typescript plugins developed by the Eclipse community. Automatic Updates: all components of the editor will be updated automatically, including the latest Phaser official version (no Phaser CE support for now) Improved JS Editor: small changes in the JS type inference engine that results in a much better content assist (yet not *perfect*) Bug fixing, performance improvements and *minor* features in the scene editor, asset pack, local HTTP server, project templates and chains. New learning content: we wrote a tutorial in the GameDevAcademy blog, about how to make a platformer game with the visual scene editor. Read more in the release notes For the next release we plan to focus on: Do a research of the available Typescript plugins and write a tutorial about how to install them. Start with the implementation of the P2 Physics tools for the visual level editor. Support Phaser v3 if it is released in the next 3 months. See you soon! Arian (Scene editor: Added two new parameters to the Animations editor) (Scene editor: recovery from missing assets) (Check for Updates) (Eclipse Marketplace)
  17. A think at certain point of the editor development, probably when the scene editor reaches the stable state (today it is in preview yet) I should write an article like "The Phaser Editor guide for Unity developers"
  18. > There is presently no way to add custom prototypes, or add a sprite as a Sprite sub-prototype in the editor? Yes, you can use custom sprites, actually there is a wizard File > New > Sprite Source File that you can use, it creates a sprite sub-prototype. But the scene editor does not have any way to create the objects by using a custom prototype. It just uses the "game.add.sprite" pattern. But there is a workaround you can do. Since it is javascript, you can change later the prototype of the sprites. For example, if you have a player object made in the scene editor, later, in the create method you can change its prototype by the one you did: var scene = new Scene1(this.game); scene.fPlayer.__proto__ = MyPlayer.prototype; or the preferred way in ECMA6 (already supported by firefox and chrome): Object.setPrototypeOf(scene.fPlayer, MyPlayer.prototype); If you want to change the prototype of many coins, just iterate the group of coins and set it: coins.forEach(function (coin) { coin.__proto__ = MyCoin.prototype; }, this); Or use the setAll shortcut: coins.setAll("__proto__", MySprite.prototype); Please read more about changing prototypes here: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf Warning: I never saw someone doing it in Phaser, people only create customs objects by using the "new" keyword, but as a workaround to the generated scene of Phaser Editor it should work well. In the article it says that it can be an expensive operation, but usually you are going to do it in the create method, that is executed once. In future versions of the scene editor we are going to support custom prototypes or custom object factories, yet we have to decide it. > For assigning instance variables to prototypes/objects in editor, I more meant adding new variables to objects in the scene,but I believe you explained that that's not supported? I guess you mean that you need to add custom properties to the objects. Well, as I explained, in Phaser there is the "data" property, it is reserved only to put user data. In the editor you can edit that property, it is a simple text editor where you write the JSON value of data, so there you can put your own properties. But now I realize that maybe you want something like in VS/C#, where new properties can be edited in the property grid, as any other built-in property. It is an interesting feature and we just added it to the TODO list :). Maybe in the future we can create a more sophisticated way to create custom sprites with custom properties and support it in the scene editor. > How then do you/what is the best way to manage properties regarding an object on an instance level?ie you have "enemies", and they each need: health (float), state(enum{ idle, active, attacking, damage}), attackPower (float), etc.and each would would have varying starting amounts, and different values at different points. Well, you have the option to use the "data" property of the sprites, for example: sprite.data.state = STATE_IDLE; It is jsvascript, you can add properties at any moment to any object. but yet you can use the custom prototype, that I would use it if there are custom methods, if you only want to add custom props to an object, but logic still coded in other place, in the state or a behavior class, then I will keep using the sprite.data. You can init your objects like this: enemies.setAll("data", { state: STATE_IDLE, attackPower : 1.5 }); By the way, not that Phaser sprites has built-in health variables. > For using setAll, I (attempt to) do so here... where setting "collected" doesn't work, but I assume my syntax is wrong? Do I somehow need to create the property first? Yes, I think you are right, you have to create the collected var first. But if you use the data property it works (things in Phaser are not like in Unity, there are lot of shortcus that allow to create games quickly and with fewer code, OOP does not have a strong presence): this.pickups.setAll("data", { collected : true }); // later you can do this.pickups.setAll("data.collected", false); By the way, in the scene builder you can create "template objects", with your own settins, like custom "data", then you can copy/paste to reproduce them. Even you can copy/paste from different scenes, so you can create a scene only for template objects that you can use in all your real scenes. In the scene settings dialog you can uncheck the auto generate code option, so this template scene is going to be only for design purpose. > For animations, yes I meant frame animations. Can you set killOnComplete to all children in a group? Mmm... the killOnComplete can be set to the animation object. You can do something like: coins.forEach(function (coin) { var animation = coin.animations.getAnimation("collect"); animation.killOnComplete = true; }, this); I did not test it but it should work. This is something we would be happy to support in the scene editor! > For emulating a three button mouse, I more meant in the Scene Editor - it requires middle click to pan. Ah, do you mean that you want to pan for example by pressing Ctrl+Left Button? No, it is not supported, but it is something we can implement just right now for the next release that will be very soon Well... it was a good round, there is nothing like user feedback to improve your product Thanks!
  19. Going to home... tomorrow I answer all the questions. Sorry, I missed the link: http://phasereditor.boniatillo.com/blog/2015/11/phaser-editor-with-sublime-text
  20. Hi @Whas Very interesting post, let's go step by step... A prototype in JavaScript is like a class in C# (I guess it is the lang you are using in Unity). Usually in Phaser tutorials, mails, etc.. the word class is used instead of prototype. This is an example of how to create a "subclass" of a Phaser.Sprite: MonsterBunny = function (game, x, y, rotateSpeed) { Phaser.Sprite.call(this, game, x, y, 'bunny'); this.rotateSpeed = rotateSpeed; }; MonsterBunny.prototype = Object.create(Phaser.Sprite.prototype); MonsterBunny.prototype.constructor = MonsterBunny; MonsterBunny.prototype.update = function() { this.angle += this.rotateSpeed; }; The equivalent in C# is like this (if I remember well C# ): class MonsterBunny : Phaser.Sprite { public double rotatedSpeed; public MonsterBunny(game, x, y, rotatedSpeed):base(game, x, y, "bunny") { this.rotatedSpeed = rotatedSpeed; } public override void update() { angle += rotatedSpeed; } } > Does every object (sprite) have one? In Phaser yes, in JavaScript I don't know, maybe primitive types has no prototypes. I mean, Phaser follows the OOP, all features are grouped in a classes (prototypes), for example, a sprite in Phaser.Sprite, a button in Phaser.Button, a state in Phaser.State, etc... > Where/how can you access this? To create an instance of a protoytpe just use the "new" keyword. Like in "var group = new Phaser.Group(game)". But in Phaser there are lot of "helper" methods to create the objects, for example, to create a sprite you can use the "game.add.sprite()" method, to create a group "game.add.group()", for simple games probably you don't need to create objects with the "new" keyword, unless you create custom objects like we do in Phaser Editor to create the scene, that is a subclass of Phaser.Group. > Is it the name of the original image file? What image file? If you are talking about when you drop an image asset into the Phaser Editor canvas, the object gets the name of the asset key. But it is just the name used by the variable that references that object. For example if you drop an image asset with key "dog", it creates a `var dog = this.add.sprite(0, 0, "dog")`, but you can change the name of that variable in the property grid by setting it in the `Editor > name` property. > The first instance you create? The name of a function you first need to write and then assign? How would that be done? As you can see in the previous snippet, the prototype is created by defining a "special" function with a "prototype" field. > When you drag an object from assets to scene, or duplicate an object, does it create a new prototype, or a new instance? It creates a new instance. The prototype remains the same. If you duplicate a Phaser.Sprite, it creates a new instance of Phaser.Sprite. > Can you assign instance variables to prototypes/objects? You can publish objects with instance variables. Just flag it as public in the property grid. Look this case, it will create a "fPlayer" instance var. > Can this be done in the scene editor? (ie every "coin" has the variable "collected" set to "false" at start) What is the best way to do this? Well, yet in the scene editor you cannot assign a custom prototype (class) to the objects, the objects are created using the "this.add.sprite", "this.add.group", etc.. methods. In a future we can support it, but in the meantime there are other options. Each sprite in Phaser has a "data" field made specially to put user data. You can use it to put the "collected" var ("coin.data.collected"). In the scene editor you can edit that property. It opens a simple text editor where you can write a "json" object that will be assigned to the coin. Read more about it here. And sure, you can use the coinsGroup.setAll("collected", false) too. The "setAll" method of a group just do an iteration for all children and set the property value. It is the common practice in Phaser. > In the templates and the "Mario-Style Platformer" tutorial, all logic is done in Level.js. Can you instead place the logic of each prototype/object into its own script? (ie Player.js, Coin.js) Yes, in Phaser you can do it, you can create a subclass of Phaser.Sprite and override the "update" method. To add it to the game, or group, just create an instance of your class with the right parameters. In the example of the prototype it does "var wabbit = new MonsterBunny(game, 200, 300, 1);". However you are free to do it in the way you like. I like to use "behavior" classes. I code the logic of the interaction of the coins with the world in CoinBehavior prototype (that I write in other file) and then I just call it in the game loop. In my personal opinion, custom sprites are good to apply transformations on the sprite, but for interactions with other objects I prefer to use this "behaviors" classes, that take as parameters the different elements of the game and I can use it in different levels. > As Level.js already loads the assets.json, does every script need to do the same, or can they just access it from Level.js? How is cross-script referencing done? Cross script references is similar to C#. You declares elements (let's say classes) in any file but they will be available in all the scripts. The name of the script file does not matter, what matter is the name of the classes you define. To make a script "visible" to others, you have to include them in the <script> tag of the index.html file or you can add them to the assets.json using the "script" asset type. But warning, the scripts loaded via the assets.json are those you will use after the game is created, they are loaded just like any other asset (image, audio, etc..). The advantage to load game scripts qith the assets.json file is that it is done async, and you can get the progress of the load (this is a more advantage stuff). The thing with the Level.js file is that there we define the Level state. In Phaser the loop of the game is implemented in states. You can create different states in different files, for example, a Menu.js file could contain a Menu state, that controls the game loop in the menu screen. And states also "loads" and "create" the objects. There is not need to load the assets (asstes.json) in all the scripts, else in all the states. Actually you can split the assets.json in sections and load one section or other in dependence of the state (in menu you would like to load buttons, in the Level coins). > In the same tutorial, all the fruits/coins are collected into a group. Is this a container/parent object? Are the elements then children? Yes, it is the parent object of all the coins. In Phaser a group has different roles, like transformation or in this case, grouping objects of the same type/behavior. > What is the best way/when is the best time to assign a variable to > all elements? (I tried doing so in Create using "this.pickups.setAll("collected", false);", but when I checked the value in an element later it returned null) Well.. I should see the code you wrote in the create, but in that method is where you can init your objects, as you did. > In many Phaser examples online, Functions are done with out any form of container (ie Function preload()), and everything is executed by game (ie game.add._____) but in both the tutorial and the templates, functions are done through Level.protoype (ie Level.prototype.preload = function()), and everything is executed by this. (which I assume also points to Level.prototype?). Is there a difference? Is there a reason to doing things one way or the other? Yes well, that's the pretty and the ugly of JavaScript or dynamic langs, you can do the same in different ways. For simplicity many Phaser examples uses object literals to create the states, the game injects all the needed methods in it, think like a class that is created dynamically. It is good for simple games and demos, but if you want inheritance you will be forced (I think) to use prototypes. In Phaser Editor we use prototypes for a simple reason, it helps the type inference engine, because with prototypes you are telling to the "compiler" the context of your code, so it can infers the available methods when you code "this.something". Sure, if your game instance is global, like in many examples, you can use game.add, game.load, etc... these are shortcuts to the current factory and loader, it is just a way in Phaser to write less. But again, it is good and beautiful for small games or demos, but in bigger games you would like to do encapsulate things in custom states, sprites, groups, behaviors, data classes, etc... > What is the best way to check/set a value in each element of the group? By using the group.setAll("myproperty", myvalue); > (ie Instead of kill the fruit object upon overlap with player, I set them to play an animation. How would I then set them to destroy upon completion?) What animation? Those made with frames? Or those made with tweens? In the first case, the play method has a final parameter killOnComplete: {Phaser.Animation} Phaser.Sprite.play(name, frameRate, loop, killOnComplete) In the second case, tweens, you can add listener to the onComplete signal, and kill the coin. > Is there a way to find a specific element in a group (similar to an array index)? group.getAt(index) But just look into the Phaser.Group doc, there are lot of useful methods there. > Can you set parent child relations in the scene editor? If not how is this set? Yes, you can group elements. Just select the objects and press "G", it will create a new parent group with the selection as children. And you can break a group by pressing SHIFT+G. > Is there a way to use Vectors/containers to compare and assign values? (ie player.position = Vector2(x, y)) There is a Phaser.Point class used in many properties like anchors, scale, position. You can do things like sprite.position.set(10, 20). > Is there a way to emulate/simulate a 3 button mouse/middle click? (ie ctrl + alt + left click) Hehe no idea! Check out the Phaser.Pointer class. You get the pointers from game.input.activePointer for example. > I understand that at this time, Phaser Editor does not support Typescript. However as I am more familiar with C based OOP, many have suggested it. Would using Typescript externally alongside Phaser editor break workflow/the project? (From what I understand Phaser Editor does not support editing files externally?) Yes, you can use Phaser Editor for example to manage the assets and create the scenes but code typescript with other editors. There is not any problem with that. You can read this article about it. > Also, just a vanity thing, but can you add/edit editor themes? I'm using dark, but whenever it highlights other uses of a keyword, the highlight makes the word illegible. Go to Windows > Preferences > JavaScript > Editor > Syntax Coloring. There you can change the style of different elements like keywords. I hope that this answer make things more clear. Please do not hesitate to ask anything.
  21. I think Mighty Editor has a more complete visual editor, we have Mighty Editor as reference and keep working on Phaser Editor to improve it at every release. -- Edit: I am sorry, I was confusing Mighty Editor with Qici Engine!
  22. If you want a right text editor (not a huge IDE like Phaser Editor) maybe you can try with Sublime Text, we did a plugin for Phaser API auto completion. For Brackets we did a Phaser Chains extension that helps a lot with the Phaser API.
  23. -- Edit: I am sorry, I was confusing Mighty Editor with Qici Engine! Hi @kingangelo26 Phaser Editor author here It looks like everything you mention in the post is supported in Phaser Editor > My target software is a drag and drop way for developing the visual game aspects Take a look to the Phaser Editor scene builder. It is in preview state but we keep improving it and I think it is pretty usable. > assest organization Take a look to the Asset Pack editor, it is based on the Asset Pack manifest (a Phaser supported format via game.load.pack). > sprite/spritesheet editor/maker Phaser Editor has a texture atlas maker that you can configure to generate spritesheet like textures. You can select the Grid mode. In addition you have the Preview window where you can preview the spritesheets and the visual scene maker has an Animations tool to create the spritesheet animations. > but the code is still made from phaser framework and can be exported and use outside the software Phaser Editor only uses Phaser standards and familiar coding styles. There is not any third-party plugin or fancy Phaser code. Actually it is our intention that users can use other tools together with Phaser Editor. You can read here a post about to use Phaser Editor together with Sublime Text. > for coding game mechanics I want auto completion Take a look to the JavaScript editor. It auto complete the Phaser API and some other stuff like the asset names, easing names and code snippets. Even in the case of the asset keys and easing literals you will get a preview popup. (Note about auto completion, you should follow some guidelines in your coding styles to help the auto completion engine, in the doc we talk about it). > and other IDE alike features Our editor is based on Eclipse so you will get lot of IDE stuff: workspaces, preferences, flexible layout, hotkey bindings, etc... Other Pros... it is updated with frequency, every 1 or 2 months the system base, and the Phaser support is updated at every Phaser release. Cons (in this point do not expect a long answer from me hehe)... it is a commercial product, you should purchase a 1 year license (however you will get personal support), and not everybody in the web dev is used to huge IDEs, but it looks like you like them :).. ah, and it is a relative new product, there is not a wide community or something like that around the editor. By the way, you can take a look to the GameDev Academy article we wrote recently: Make a-Mario-Style platformer with the Phaser Editor. Just take a look to both editors, Mighty Editor was very easy to install and it is a tool we keep as reference specially when we develop the visual scene editor. Keep in contact. Arian
  24. Hi @mattbrand I invite you to read in the issues of the project, the open and closed issues, maybe there you can find the reason of the fail. Also I recommend to try with Sublime Text 3. If you do not find nothing there tell me.