Yehuda Katz

Members
  • Content count

    49
  • Joined

  • Last visited

About Yehuda Katz

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Yehuda Katz

    Custom font works oddly with game.add.text

    I faced problem like you and did not like solution to wait for N seconds or wait for user input, here is 100% working and proper solution: var on_device_ready = function() { // https://github.com/bramstein/fontfaceobserver var font_calibri = new FontFaceObserver('Calibri'); Promise.all([font_calibri.load()]).then(function () { game = new Phaser.Game(...) ... }); } window.onload = on_device_ready; Within your index.html file you should add <style> @font-face { font-family: 'Calibri'; src: url('assets/font/Calibri-Bold.woff') format('woff'), url('assets/font/Calibri-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } </style> It may take some time before you can do everything correctly but I used this method on thousands of old/new mobiles and it works fine
  2. Yehuda Katz

    complete tween right away

    Hello, Imagine the scenario when we animate object (scale) during 3 sec. Animation is awesome but if user interacted with game, we need to complete animation right away and start new. Is there any way to force tween to complete? Currently I am doing following this.progress_tween.stop(); for (var key in this.progress_tween.properties) this.progress_tween.target[key] = this.progress_tween.properties[key]; this.progress_tween.onComplete.dispatch(); Thanks in advance
  3. Yehuda Katz

    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
  4. Yehuda Katz

    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
  5. Yehuda Katz

    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?
  6. Yehuda Katz

    proper loading in progress

    Awesome @samme I have to try this logic with my code. Looks very promising!
  7. Yehuda Katz

    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.
  8. Yehuda Katz

    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 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function but without much success + Safari did not implemented it yet
  9. Yehuda Katz

    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'); this.game.add.tween(sprite.scale).to({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.
  10. Yehuda Katz

    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'); this.game.add.tween(sprite.scale).to({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'); this.game.add.tween(sprite.scale).to({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?
  11. Yehuda Katz

    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(this.game, '', first_sprite.width, first_sprite.height); first_bmd.draw(first_sprite); var second_bmd = new Phaser.BitmapData(this.game, '', second_sprite.width, second_sprite.height); second_bmd.draw(second_sprite); var result_bmd = new Phaser.BitmapData(this.game, '', 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
  12. Yehuda Katz

    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(this.game, '', 120, 120); icon_bmd_source.draw(new Phaser.Sprite(this.game, 0, 0, 'default', 'level_icon_1')); var icon_bmd_overlay = new Phaser.BitmapData(this.game, '', 120, 120); icon_bmd_overlay.draw(new Phaser.Sprite(this.game, 0, 0, 'default', 'level_disable_overlay')); var icon_bmd_result = new Phaser.BitmapData(this.game, '', 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(this.game, 50, 100, icon_bmd_result); this.game.add.existing(sprite); 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.
  13. Yehuda Katz

    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.
  14. Yehuda Katz

    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 game.world but instead regarding object itself.
  15. Yehuda Katz

    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)