• Content Count

  • Joined

  • Last visited

  • Days Won


markus.n last won the day on January 4 2016

markus.n had the most liked content!

About markus.n

  • Rank

Recent Profile Visitors

868 profile views
  1. I'm happy to report that during the last year this project of ours has grown to a full-blown Phaser-based point-and-click engine with dialogues, inventories, cutscenes, assets and an editor to create it all dynamically! We're intending to make it open-source in a few months, but it's still very much work in progress and heavily customized to our own specific needs. To answer your question meanwhile, here's a stripped-down version of our moveCharacter function along with a few other lines of code, hope they'll help: // Clickplate is an invisible screen-size sprite, which registers clicks for movement and dialogues, whenever there's nothing else to click// NEEDS TO BE IN THE BEGINNING so that everything else that's clickable comes on top of it!this.clickplate =, 0, 'clickplate');this.clickplate.anchor.setTo(0, 0);this.clickplate.inputEnabled = true;, this);;// Move character to a defined point moveCharacter: function(sprite, pointer, customTarget) { if (this.character.clickToMove || customTarget != null) { if (this.characterTween && this.characterTween.isRunning) { this.characterTween.stop(); } if (customTarget == null) { // No target in function call = normal click-movement this.character.targetX = pointer.worldX; // "worldX" instead of just "x" is important so that the player can move } else { // Cut scene movement with target in function call this.character.targetX = customTarget; } if (this.character.x < this.character.targetX) { // Define which way the character is facing when walking this.character.scale.x = 1; // Character faces right } else { this.character.scale.x = -1; // Character faces left } // defaultWalkingVelocity is pixels per second that the character will move. // Y is 500 by default, 3d movement can be added by calculating/adding that too. var duration = (, this.character.targetX, 500) / this.defaultWalkingVelocity) * 1000;'walkAni'); this.characterTween ={x: this.character.targetX, y: 500}, duration, Phaser.Easing.Linear.None, true); this.characterTween.onComplete.add(function() {'idleAni')}, this); }}
  2. markus.n

    Phaser + Spine

    @Flake, yeah this is what we came up with MightyEditor, works generally very nice! However, unfortunately it is quite heavy performance-wise even with one character, and especially more than one characters at once. On desktops it's fine, but on portable devices not so much. In the end we're making compromises and reverting to normal atlas animations now. If you haven't noticed, Phaser 3 will support Creature natively though!
  3. Hi, We have a character sprite with lots of different animations. It gets to the point where we can no longer fit all the frames in one atlas - since there are texture errors on some devices if the size exceeds 2048x2048. How could i assign a custom atlas to some animations? I'm guessing replacing the "spriteName.animations.add" function with some combination of "new Animation" and "new FrameData", but how exactly? Thank you for any assistance!
  4. markus.n

    Phaser + Spine

    I'm happy to report that MightyEditor was able to produce a skeleton-style animation as was necessary, and it's now working nicely. Still looking forward to having the Spine plugin available one day, maybe in Phaser 3? This is a brilliant solution for the time being anyway.
  5. markus.n

    Phaser + Spine

    Information about Spine, or skeleton animations in general, would indeed be crucial. I've tried to do my research thoroughly, there are many threads and questions about it, but almost no answers. We'd really need to know at least what's currently possible and what's not. So: Is there ANY, no matter how hacky way to get Spine animations working in Phaser? Please anyone, share your examples if you've managed to get it working even poorly or partially! The Spine support should apparently be in Pixi, but here Rich said that it's not supported by Phaser anyway. Also there's this Pixi-Spine library which you mentioned, could it be implented in Phaser, and if, how? Even more, there is this mysterious page in Phaser documentation. I tried to get that linked example working by attaching those Pixi js files, but with no luck. Another chance, we got this DragonBones example working very nicely with Phaser. However, I've never encountered a product worse documented than DragonBones, Flash development isn't an option for us, and the most convenient option (Spine->DragonBones conversion) doesn't work. When trying to open Spine files in DragonBones, there are error messages in Chinese, which according to Google Translate say "Open file failed". If it worked, it would be by far the best option after direct Spine support, since we have a functioning Spine animation available and Phaser working with DragonBones. If anyone has managed to do it, I would appreciate to heavens a description how on earth it was done. The DragonBones front page says it supports Spine, but the forums say that it hasn't supported it since early 2014... Creature unfortunately also isn't an option for us, since it's currently not available for Windows. At the moment we're looking into MightyEditor (video and links about it here), hoping to get skeleton-style animations from there if nothing else succeeds.
  6. I had exactly the same situation as Bengsis. Also, unlike instructed, his example did not work by just commenting out the preload function of Boot.js, I actually MUST load some images (or do something else?) there in order to get to Preloader. This seems very counter-intuitive and I couldn't find any mentions about this aside from this thread, does it really work as expected? I can imagine lots of people getting frustrated while trying to achieve a simple "hello world" page. At least that's how i begin, commenting everything unnecessary out and trying to console.log something, and currently it doesn't work like that. Which brings me to a suggestion, it'd be really nice to have a few actual, complete and out-of-the-box working "hello world" examples below the resources folder, in addition to the existing templates which don't include the images or phaser source file. That's where most people start off anyway, right?
  7. I found a bug which is probably related to CocoonJS, I suppose this is the right place to report it? Dragging a sprite and bringing it on the top doesn't work with CocoonJS (Canvas+), despite working fine both on desktop and the Android stock browser. I've tried both having the second parameter of enableDrag() as true and by sprite.bringToTop() inside a onDragStart callback function. If I don't bring the sprite to the top at all, it works fine also on CocoonJS, but it'd be important for my game to do so. These threads are probably related, and there might even be a solution in the latter one, but I don't understand it well enough to implement it without a code example. Help greatly appreciated as always.
  8. I'm very happy to report that I got to the bottom of this! Indeed even the CocoonJS launcher's showcase demos are chopping on these Samsung devices (good example: "Sprites 2" with adding animated fish), but ONLY for the first 10-20 seconds, and especially the first few. Since my Phaser example tween was only 20 seconds long and begun immediately, it was affected by this and I didn't see the problem ending. When I chained a bunch of new tweens totalling to a minute or so, there was no problem after the beginning anymore. Once my game is complete with menus etc, I doubt this will be a problem at all. Of course it'd be nicer if this chopping wouldn't happen at all, but this is easily acceptable. Faith in technology and HTML5 development restored.
  9. Thank you both for your replies! Str1ngS, could you please elaborate how and what you've tested in Tab3, in order to get acceptable performance for a Phaser game? You still say the performance is "rather shit", but also that you haven't had issues? This seems contradicting. I'm not looking into getting constant 60+ fps, not even 30 would be necessary. Also, the CocoonJS launcher indeed claims the frame rate to be good (~30-50) even when the chops appear. However, they are VERY noticeable, especially in the first seconds, no nit-picking here. I just need to develop a game which doesn't look buggy for anyone playing it on a market leader's very common devices. This also applies to Galaxy S III, unfortunately I currently don't have access to more, but on the other hand, these should work anyway. Seeing that the simplest possible tween on Phaser doesn't perform, it very sadly looks that I have to abandon Phaser in this project and come up with something else, unless I can find a miracle cure. I'm still not saying that Phaser would be the problem here - I understand what you're saying about Samsung, and I found interesting and very depressing comments about Android's WebView in general, e.g. here: It truly seems to be the new IE6 with an added revenge, I'm extremely surprised and disappointed that Google could have let this happen. Whatever the reason is, Phaser and these common devices together produce unacceptably poor performance. This can also be seen by browsing the online Phaser examples, many of which are lagging severely on the stock browser, which we unfortunately have to live with for years to come. However, the bright side is that the CocoonJS demos packaged with the launcher run extremely smoothly on the same device, I couldn't distinguish it from native even if I tried. This means that somehow, despite all the limitations, it indeed IS possible to create a smooth experience with HTML5 and these poor performing devices. Next, I'm going to make some performance tests and dig into the code of those and also Phaser's tweens, hoping to find something. In a nutshell, I'm mostly after discussion and experiences on Phaser + Android (or maybe just Samsung?) performance, and if there might be anything to be done with it, other than wait for new versions of CocoonJS etc. As it is, I can't develop mobile games on Phaser, no matter how much I'd love to.
  10. I'm surprised I can't find threads about Phaser development for Android and it's horrible performance. Generally the result of my googling is that making HTML5 games for Android is way worse than making Internet Explorer 6 hacks for websites was before. It looks like Phaser and probably most other frameworks are more or less unusable with it, so this is a huge issue. I'm early in development of a game, and after my tests I've noticed it's lagging on Android even with the simplest possible tween for one sprite across the screen (code attached). This applies both to the native Android browser and using CocoonJS with Canvas+, my test device is Galaxy Tab 3. CocoonJS claims the fps to be over 60, but in reality there's the occasional chop in movement every few seconds. On Android's Chrome browser it's ok, but obviously that's not enough. If I use the moveToXY function instead of tweens, it's closer to acceptable, but still far from perfect. Any of the tips provided in the long and pinned CocoonJS thread don't seem to apply to this case, since I suppose it's more about Android than anything else. I'm very interested in hearing people's thoughts about this, have you made not-laggy games for Android with Phaser, and if, how on earth did you succeed? window.onload = function() { var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, 'gameContainer', { preload: preload, create: create }); function preload() { game.load.image('robo', 'img/robo_small.png'); } function create() { var robo = game.add.sprite(0, 0, 'robo'); var tween = game.add.tween(robo);{x: 1200, y: 600}, 20000, Phaser.Easing.Linear.None); tween.start(); }};
  11. Hi, I need a popup-style text box (sprite image) appear and disappear at times at the bottom of the screen, while everything else stays as it is. However, this sprite doesn't move by tweening, and the problem seems to be the fact that it's fixed to the camera. If I remove that fixedToCamera-line, the tween works just ok, but not with it, there's just no movement whatsoever. I can always console.log the tween object and it looks ok, and .onComplete also fires on time without the tween movement actually happening. Any way around this problem?'textbg', 'img/general/dummyimage.png');this.textbg =, 668, 'textbg');this.textbg.fixedToCamera = true; // Disabling this makes it work!this.textbg.anchor.setTo(0, 0);tween ={x: 0, y: 468}, 1000, Phaser.Easing.Linear.None, true);
  12. Anyone? Various input problems are seriously ruining every aspect of my point-and-click game. There are lots of things I want to do by clicking aside from moving, and I can't think of any other way to handle the movement. Another very related problem is that i have dialogues both in simple text and multiple choice by clicking (basic adventure game stuff). Within dialogues, simple text can be continued by clicking wherever like, this); , but if there's a multiple choice, it works like, this); This means that with multiple choices, both of the clicks happen simultaneously... which leads to showstopper problems. I need to be able to disable the universal clicking temporarily somehow! I read that for sprites you can do this: sprite.input.enabled = false;sprite.input.enabled = true;But neither of these seem to do anything: = false; = false;Edit: Found the option of doing = true;But it apparently disables ALL input, so i can't click on the text either.
  13. Wow, thanks! Didn't even cross my mind to check parameters without sending any parameters. In the end this was much easier than I thought.
  14. Hi, How should I create a list of text objects, which do different things when clicked? In my case, it's about choosing dialogue and whatever happens next.for (var i = 0; i < this.textChoice.length; i++) { this.textArray[i] =, 150 + i * 20, this.textChoice[i].text); this.textArray[i].inputEnabled = true; this.textArray[i].events.onInputDown.add(function() { this.dialogueNext(WHATHERE?); }, this);}What should I put as a parameter for the dialogueNext function? It'd need in order to define the next action. If I use the i variable, it's either undefined or the last value of it when it gets clicked. A great thank you for anyone willing to help me. (edit: solved a part of the problem)
  15. Hi, I'm doing a point-and-click adventure game, in which the movement works approximately as instructed here: How can i disable temporarily the following line, which makes movement possible? Even better would be to have some conditions to it, with the idea of "onDown except when clicking on these objects: [ ]", this); The problematic situations are e.g. when I click on the fullscreen button or a clickable object, which should trigger dialogue. In these cases, I don't want to move the hero at all. I have a clickToMove flag, and the whole moveSprite() function is inside of it. My update() function looks like this: update: function () { if (!this.dialogueInProgress && !this.scannerOn) { this.clickToMove = true; this.heroUpdate(); } else if (this.dialogueInProgress) { this.clickToMove = false;, this); } else if (this.scannerOn) { this.clickToMove = false; } }, This actually works during dialogue and the scannerOn event, but the problem is the FIRST click: the hero always moves to the fullscreen button or clickable object and keeps still only on the following clicks. The animation i can get rid of (happens in heroUpdate()), but the tween from moveSprite() always happens. Thanks in advance for any help!