Rebecca

Members
  • Content Count

    8
  • Joined

  • Last visited

  1. I’ve fixed my issue. Turns out I was missing the maximum scale in the viewport meta tag. The following tag scales the game correctly. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> Try adding that to your game and see if it helps. Correction: The solution above worked for a couple reloads and then I was back to the wrong scale (however that happened). What actually works is adding the meta tag at runtime and setting the scale to 1 / window.devicePixelRatio.
  2. Have you found a fix for this issue? I haven’t touched my game in a couple of months and suddenly it starts doing this on Android while it’s fine in emulation on desktop as described above.
  3. Rebecca

    Executing code after tweening completes

    My definition of clean code is the one defined in the linked book. There are a lot of rules in there but eventually they're all meant to improve maintainability especially when working with others. Here I was mostly referring to one function not doing what it's name implies because it's calling the next function internally. Anyone working with the code will have to memorize that. I do have performance in mind but honestly not a lot of knowledge in that area and my current game is too slow for it to matter much. If you do have any pointers to learn more about performance in HTML5 or even Phaser games, I'd be glad.
  4. Rebecca

    Executing code after tweening completes

    It's mostly a technical issue of how I want to organize my code but I'll try. After the user matches blocks in a match 3 game a couple of things need to happen. All steps may involve some mutation of the board which is why they have to be in order. Without animations or other asynchronous calls I just write them in order which is what I usually do when writing the first prototype. At this point I have a high level where you can easily understand how the game works without having to know details like how the board is organized. Those are concerns of functions like removeBlocks which as you've guessed might also be generic and not just used after matching. Once I introduce animations I have to refactor to integrate the asynchronous parts. I can't just keep calling the functions in order because they might change the board asynchrously internally. The possible solutions I see are: use onComplete handlers directly but that's not clean code, i.e. it's unreadable, unmaintainable; expose the tween to add the handler on the higher level which isn't too dirty but leads to callback hell; use an async library or promises which currently appears to be the best solution. TL;DR: I'm trying to find a way to add or remove animations anywhere in my code without having to refactor half the game or rendering it unmaintainable. In an ideal world I'd just slap an await in front of functions like removeBlocks and leave the rest to the lower level but we're not quite there yet.
  5. I'm building my first Phaser game and stumbled upon a conceptual issue I'm not sure how to solve best. Sometimes I want to wait for a tween to finish before I run the next bit, e.g. in a match 3 game I'd want to remove the matched blocks before dropping the rest and so on. Here's a snippet to illustrate how I've found it done in simple examples. function removeBlocks() { var duration = 1000; game.add.tween(...).to(..., duration, ...).onComplete(...); ...}function dropBlocks() { ...}removeBlocks();game.time.events.add(1000, dropBlocks);This works but there's an implicit dependency between the duration of the tween and the timer and any code run in the onComplete callback will race dropBlocks. The former could be fixed by passing the duration around but that's an implementation detail of removeBlocks that nothing else should depend on. The obvious way to make the dependency explicit is to use the onComplete callback. However, that means either passing dropBlocks to removeBlocks or exposing the tween to add the onComplete outside. Alternatively, one could introduce an onBlocksRemoved event that's triggered in the onComplete callback and add removeBlocks as a one-time listener. That hides the tween completely but feels like abusing the event system if this is the only callback and means writing code in the wrong order: game.onBlocksRemoved.add(dropBlocks);removeBlocks();Instead I'm currently returning a promise. function removeBlocks() { var tween = game.add.tween(...).to(...); var promise = new Promise(function (resolve) { tween.onComplete.add(function () { resolve(); }); });}removeBlocks() .then(dropBlocks) .then(...);I do like this solution a lot more than the alternatives because it hides the tween while making chained events readable but promises are usually defined by resolving to a value which is something I don't have or need. That may be a hint at me misusing promises here. I'd love to hear your opinion on my approach and some open questions / thoughts. 1. Is there an obvious solution that I'm missing because I'm still new to the framework? 2. When I'm tweening several things at once I could use Promise.all to continue once all tweens have finished but that might be me overthinking something simple.
  6. Rebecca

    How to use kerning in BitmapText

    Hi everyone, I can't figure out how to get kerning to work with BitmapText in my game. I've created my own font which works fine apart from the kerning. Debugging shows that the kerning information is parsed by Phaser (2.4.4) and used to determine line breaks but it is ignored when rendering. It works as expected if I add the kerning to this line but I haven't read enough of the source to be sure it's a bug. Is there anything might I have overlooked like a special setting when loading the font? I'd post code but so far I doubt it's relevant.
  7. Rebecca

    Rotate back and forth using tween

    You can use repeat to keep yoyoing. You only need a second tween to get to your start rotation.