Yehuda Katz

  • Content count

  • Joined

  • Last visited

  1. How to cache Texture or BitmapData

    Hello, Can anyone share information how can I do manual caching of sprite or speed up rendering in general? If I have group with lots of small sprites, it's wise to convert it into single BitmapData and use it as texture to prevent recalculations. However, I have no clue how can I do that and what other methods Phaser may offer. Thanks everyone in advance for help
  2. proper loading in progress

    @samme you may ignore my previous post. I tried it in my app and it's not as smooth as it looks. You should not only put code within chunks but also wait for the whole queue to be completed, before you can execute the main code. It's just like loading content before starting the stage in Phaser. How Phaser manages to show loading screen before anything? When I added Phaser's native loading code and then execute my heavy code, Phaser still managed to display loading screen first! How can I do the same? If I can do the same then I can cover screen with membrane so user knows that button was clicked, input was accepted by app and user needs to wait 1-2 sec. Thanks
  3. proper loading in progress

    @samme basically you solved problem with calling each chunk with certain delay by using update() method. The only problem is, how to split work into chunks. Such code will be very difficult to debug or analyse. Of course any stage generation would have loops which theoretically could be exported to such update() method... but those loops should be executed in certain order. The second loop cannot start until first one is not finished... and what if there are dozens of loops. I am thinking to create some kind of queue where each chunk of loop is submitted as anonymous function. So old style code: for (var i in my_custom_buttons) { // create images, assign events etc } should be converted into something like create() { var queue = []; for (var i in my_custom_buttons) { queue.push(function() { // create images, assign events etc }) } } update() { queue.splice(0, 1)[0](); } as for queue, in update method we can do queue.pop() and execute given chunk of the code. What do you think?
  4. proper loading in progress

    Awesome @samme I have to try this logic with my code. Looks very promising!
  5. proper loading in progress

    p.s. btw @samme the game.updateRender is working in the way that update method of the stage is called but it does not update canvas itself.
  6. proper loading in progress

    @samme thanks, I tried to call both those methods within while loop but it did not help. I also came to the same conclusion yesterday regarding splitting job into chunks and executing them with 10ms delay, so Phaser will have time to update the canvas. What do you think about idea to convert function into string then pass it to function which will split it into chunks and executes them with 10ms delay each? Or may be there is some easier way to stop execution to tell system do jobs in other queues for 10ms? I even tried but without much success + Safari did not implemented it yet
  7. proper loading in progress

    So seems like Phaser stops rendering once CPU is in use (even in parallel thread): var sprite = this.add.sprite(100, 100, 'loading');{x: 1.5, y: 1.5}, 500, Phaser.Easing.Linear.None, true, 0, -1, true); setTimeout(function() { var time_now = (new Date()).getTime(); while ((new Date()).getTime() - time_now < 2000) {} }, 3000); This example demonstrates how animation works fine after stage is created but once while loop starts in 3 second, the tween animation freezes. Is there any way to force Phaser redraw stage? I can add that code in between lines which generate stage.
  8. proper loading in progress

    Hello, I cannot manage to make Phaser continue updating stage while I am doing something in background. In particular, I noticed that to generate stage I need 2-4 seconds (resources are loaded but generation itself takes this time). So I decided to add loading by default withing create() method and call actual stage creation asynchronously by calling it in setTimeout(function() {}, 0). However, Phaser freezes tween animation: var sprite = this.add.sprite(100, 100, 'loading');{x: 1.5, y: 1.5}, 500, Phaser.Easing.Linear.None, true, 0, -1, true); setTimeout(function(that) { var time_now = (new Date()).getTime(); while ((new Date()).getTime() - time_now < 2000) {} sprite.visible = false; }, 0, this); I attached two short files, one is with while loop (to simulate some work) and dot is not animating, the second one is without while loop and visible = false statement var sprite = this.add.sprite(100, 100, 'loading');{x: 1.5, y: 1.5}, 500, Phaser.Easing.Linear.None, true, 0, -1, true); setTimeout(function(that) { var time_now = (new Date()).getTime(); // while ((new Date()).getTime() - time_now < 2000) {} // sprite.visible = false; }, 0, this); If that's not a way to do what I want to do then how can I show animation while I am preparing stage?
  9. cannot apply gray filter to sprite

    So here is the final version which combines any two sprite and returns BitmapData which later can be used to update existing sprite via: my_sprite.loadTexture(this._combine_sprite(icon_sprite, overlay_sprite, 'source-in')); _combine_sprite(first_sprite, second_sprite, combine_mode) { var first_bmd = new Phaser.BitmapData(, '', first_sprite.width, first_sprite.height); first_bmd.draw(first_sprite); var second_bmd = new Phaser.BitmapData(, '', second_sprite.width, second_sprite.height); second_bmd.draw(second_sprite); var result_bmd = new Phaser.BitmapData(, '', first_sprite.width, first_sprite.height); result_bmd.context.drawImage(first_bmd.canvas, 0, 0); result_bmd.context.globalCompositeOperation = combine_mode; result_bmd.context.drawImage(second_bmd.canvas, 0, 0); return result_bmd; } p.s. I decided to pass overlay sprite because there will be many icons and there is no reason to create overlay sprite every time I need to update icon. Instead I created one overlay sprite and use it many times for all icons I have
  10. cannot apply gray filter to sprite

    @samme it took me some time to finish all small tasks from todo and today I tested globalCompositeOperation. It works just awesome (and very fast too): var icon_bmd_source = new Phaser.BitmapData(, '', 120, 120); icon_bmd_source.draw(new Phaser.Sprite(, 0, 0, 'default', 'level_icon_1')); var icon_bmd_overlay = new Phaser.BitmapData(, '', 120, 120); icon_bmd_overlay.draw(new Phaser.Sprite(, 0, 0, 'default', 'level_disable_overlay')); var icon_bmd_result = new Phaser.BitmapData(, '', 120, 120); icon_bmd_result.context.drawImage(icon_bmd_source.canvas, 0, 0); icon_bmd_result.context.globalCompositeOperation = 'source-in'; icon_bmd_result.context.drawImage(icon_bmd_overlay.canvas, 0, 0); var sprite = new Phaser.Sprite(, 50, 100, icon_bmd_result);; The whole idea is that I created filled rectangle (if needed it can be partially transparent) from which I use only those pixels, which are not transparent in source =) However, I have no clue why I cannot reach canvas or context of Sprite... while I was able to do that with Phaser.Text object.
  11. extend Phaser.Text overwrite "text" property

    Found the problem. If you want to work with Text.Canvas then you should update text via setText() method but even more important to provide true as second parameter. Otherwise text will be marked as dirty and will be updated with next tick (which is not what you want, if you just changed it). Also, if you change font or any property of style then you should call updateText() method, otherwise text will never be redrawn.
  12. extend Phaser.Text overwrite "text" property

    @samme have you any clue is that possible to overwrite setter of object instead of class? To keep file list relatively small and do not call my own doAfterTextUpdate() method every time I change text value p.s. I am very tired or Phaser works very weird. When I call alingIn outside of the class everything works fine, but when I call it within class, it no longer calculates alignIn according to but instead regarding object itself.
  13. cannot apply gray filter to sprite

    @samme I am not sure if it will work for my particular case (my question was simplified) but I like clipping path, which may come up handy for weird clip masks, I should bookmark that page, thanks! @samid737 The getImageData() method seems to be native HTML5 method as it works with canvas context (the text actually has both canvas and context public properties). Probably it would be nice to have small wrapper function to quickly access line and get each pixel as array/object (in win32 development, working with canvas is hundreds slower than bitmap and bitmaps are another hundreds slower than scan line, which is something similar what getImageData() method returns). I just finished auto_fit_bounds method and should have time to give a shot for a custom gray scale converter (I will update topic if I have success)
  14. extend Phaser.Text overwrite "text" property

    That's way strange but seems like if you try to overwrite property then you should do both getter and setter... here is working solution: export default class MyTextClass extends Phaser.Text { get text() { return super.text; } set text(value) { super.text = value; } } @samme I was trying to do only setter and I was getting unclear error message, so finding this solution is pure luck. BTW updateText() method is awesome solution too, as it's called every time text is changed, thanks! =)
  15. Hello, How can one overwrite property of object, what's the syntax? Object.defineProperty(Phaser.Text.prototype, 'text', { get: function() { return this._text; }, set: function(value) { if (value !== this._text) { this._text = value.toString() || ''; this.dirty = true; if (this.parent) { this.updateTransform(); } } } }); I would like to extend Phaser.Text, so I need to handle the moment when text is changed. Of course I can overwrite setText() method but what if by mistake in future I will access .text property? Thanks in advance