Yehuda Katz

Members
  • Content count

    36
  • Joined

  • Last visited

About Yehuda Katz

  • Rank
    Advanced Member
  1. 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.
  2. 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)
  3. 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! =)
  4. 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
  5. cannot apply gray filter to sprite

    @samid737 what about processPixelRGB method, is it significantly slower than scan line? As far as I now, JS works faster with one dimensional arrays... when I got inside of processPixelRGB method, I can see that it does many calculations and conversions. However, if that's just 10-50msec then I would prefer cleaner (readable) code with processPixelRGB over faster getImageData
  6. cannot apply gray filter to sprite

    Oh and here is the sample usage: var true_size = this._text_true_size(object); var offset_x = (object.width / 2) - (true_size.left + (true_size.width / 2)); var offset_y = (object.height / 2) - (true_size.top + (true_size.height / 2)); var rect = new Phaser.Rectangle(object.x, object.y, object.bounds.width, object.bounds.height); object.alignIn(rect, align, offset_x, offset_y); Currently I am working on a code to reduce font size automatically so it could fit the bounds and in case it cannot fit then it should auto. short. words =) p.s. The only downside of such method is that you should call alignIn method every time you change the text. I tried to overwrite 'text' setter but without any success. I am not sure how to do that correctly in JS6 (with methods it's simply super.method_name())
  7. cannot apply gray filter to sprite

    @3man7 thanks, I used similar trick for gradient transparency to hide part of scrolling level map at the top and bottom. I simply created PNG file with gradient transparency and put it over =) I will probably do my own class but with next update =) @samme what if I will simply do scan line of sprite's context and cache result, will not it be much faster? BTW you asked me to share solution for centering the text, here it is (I just finished and it works awesome): _text_true_size(object) { var cache_key = object.text + JSON.stringify(object.style); if ('true_size_cache' in object && object.true_size_cache[cache_key]) return object.true_size_cache[cache_key]; var true_size_data = {left: -Infinity, top: -Infinity, right: Infinity, bottom: Infinity, width: Infinity, height: Infinity}; var width = object.canvas.width, height = object.canvas.height; var image_data = object.context.getImageData(0, 0, width, height).data; var line_index = 0, canvas_line_width = width * 4, i, j, stop; var pixel_color = 0, background_color = image_data[0] + image_data[1] + image_data[2] + image_data[3]; stop = false; for (i=0; i<height; i++) { for (j=0; j<canvas_line_width; j+=4) { pixel_color = image_data[line_index + j] + image_data[line_index + j + 1] + image_data[line_index + j + 2] + image_data[line_index + j + 3]; if (pixel_color != background_color) { true_size_data.top = i; stop = true; break; } } if (stop) break; line_index += canvas_line_width; } line_index = image_data.length - canvas_line_width; stop = false; for (i=height; i>0; i--) { for (j=0; j<canvas_line_width; j+=4) { pixel_color = image_data[line_index + j] + image_data[line_index + j + 1] + image_data[line_index + j + 2] + image_data[line_index + j + 3]; if (pixel_color != background_color) { true_size_data.bottom = height - i; stop = true; break; } } if (stop) break; line_index -= canvas_line_width; } stop = false; for (i=0; i<canvas_line_width; i+=4) { line_index = 0; for (j=0; j<height; j++) { pixel_color = image_data[line_index + i] + image_data[line_index + i + 1] + image_data[line_index + i + 2] + image_data[line_index + i + 3]; if (pixel_color != background_color) { true_size_data.left = Math.floor(i / 4); stop = true; break; } line_index += canvas_line_width; } if (stop) break; } stop = false; for (i=canvas_line_width; i>3; i-=4) { line_index = 0; for (j=0; j<height; j++) { pixel_color = image_data[line_index + i] + image_data[line_index + i + 1] + image_data[line_index + i + 2] + image_data[line_index + i + 3]; if (pixel_color != background_color) { true_size_data.right = width - Math.floor(i / 4); stop = true; break; } line_index += canvas_line_width; } if (stop) break; } true_size_data.width = width - true_size_data.left - true_size_data.right; true_size_data.height = height - true_size_data.top - true_size_data.bottom; object.true_size_cache = {}; object.true_size_cache[cache_key] = true_size_data; return object.true_size_cache[cache_key]; } It assumes that top left pixel is the background color. Actually in 99% it's transparent but I decided to support rare cases too. It also uses compares sum of color (4 bytes) to speed up the search. The result is cached so next call should be instant.
  8. cannot apply gray filter to sprite

    @3man7 Nope, I need only gray scale image to display locked levels on level selection menu. I thought may be Phaser can somehow do the job once, cache that gray scale image and use it with every update... instead of simply doing whole filter job all the time =) Once I will have free time, I will try write some code which will cache that gray scale image of image and share the code here (in case of success)
  9. cannot apply gray filter to sprite

    @3man7 I decided to give up with using filters as they drop frame rate to 15-20 from 60 on my PC (I can imagine what will happen on tablet or mobile devises). I have only 80 different sprites created from PNG file and moving them around (scrolling) glitches the screen. Does anyone have have any idea how to fix that or simply do one time dirty work in Photoshop and give up with filters?
  10. cannot apply gray filter to sprite

    I found the reason, the problem is here: game = new Phaser.Game(480, 800, Phaser.CANVAS, 'game'); The problem is that I cannot replace Phaser.CANVAS with Phaser.AUTO because it causes blinking when game is run on Android Any suggestion how to fix that or why filter is not working with CANVAS? p.s. Just in case if anyone needs Gray filter rewritten into JS6 which can be included into project: export default class FilterGray extends Phaser.Filter { constructor(game) { super(game); this.uniforms.gray = { type: '1f', value: 1.0 }; this.fragmentSrc = [ "precision mediump float;", "varying vec2 vTextureCoord;", "varying vec4 vColor;", "uniform sampler2D uSampler;", "uniform float gray;", "void main(void) {", "gl_FragColor = texture2D(uSampler, vTextureCoord);", "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126 * gl_FragColor.r + 0.7152 * gl_FragColor.g + 0.0722 * gl_FragColor.b), gray);", "}" ]; } set gray(value) { this.uniforms.gray.value = value; } get gray() { return this.uniforms.gray.value; } } user is as simple as that: this.filter_gray = new FilterGray(this.game); icon.filters = [this.filter_gray];
  11. cannot apply gray filter to sprite

    That's the most weird, no errors... I even followed @samid737 suggestion and replaced 'Gray' with 'gray' and got error message: TypeError: c.Filter[a] is not a constructor Also, do you test with JS5 or JS6? I am thinking may be those filters are not compatible with JS6 and I should rewrite them? Here is full code: export default class Achievements extends Phaser.State { preload() { this.game.load.image('logo', 'assets/images/phaser2.png'); this.game.load.script('gray', 'https://cdn.rawgit.com/photonstorm/phaser/master/v2/filters/Gray.js'); } create() { var logo = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'logo'); logo.anchor.setTo(0.5, 0.5); var gray = this.game.add.filter('Gray'); logo.filters = [gray]; gray.update() } update() { } } As you can see I even tried to use original phaser2.png file, to be sure that my png file is not not an issue Thanks and waiting for your suggestions
  12. cannot apply gray filter to sprite

    Hello everyone, is there any special limitation for using filters? I can see from example on Phaser web site that this code should work but in my app it does not work this.game.load.image('logo', 'assets/images/preload_bg.png'); this.game.load.script('gray', 'https://cdn.rawgit.com/photonstorm/phaser/master/v2/filters/Gray.js'); var logo = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'logo'); logo.anchor.setTo(0.5, 0.5); var gray = this.game.add.filter('Gray'); logo.filters = [gray]; The sprite is added but it's not affected by filter at all... I checked: that Phaser.Filter.Gray exists, gray object is really filer object and logo has it within filters property. What else I can do to find issue? Thanks in advance
  13. what exactly is pivot and what it affects

    Hello @samme and thanks for your reply. Probably you remember my last question about setTextBounds. So I followed you suggestion and used alignIn()... however, today I had new case when text was multi line. So I thought that the only solution is to go back and use setTextBounds but I was wrong. Instead, I simply enabled word wrap for text object and then set wordWrapWidth to what ever width text should have. That way, I was getting box with text (the text within lines itself can be aligned by 'align' property) which later was easily aligned by alignIn() method and since I was using alignIn in conjunction with anchors (in case of center, they should be 0.5), scale is ALWASY correct. var text = object.text.text; var style = { font: object.text.pixelsize + 'px ' + object.text.fontfamily, fill: object.text.color, fontWeight: object.text.bold ? 'bold ' : 'normal', } if (object.text.wrap) { style.wordWrap = true; style.wordWrapWidth = width; style.align = object.text.halign; } var child = new Phaser.Text(this.game, x, y, text, style); this._text_align(child, width, height, object.text.halign, object.text.valign); child.anchor.x = object.text.anchor_x; child.anchor.y = object.text.anchor_y; the method itself I am currently using: _text_align(object, width, height, halign, valign) { if (halign === undefined) halign = 'left'; if (valign === undefined) valign = 'top'; var align = Phaser.CENTER; switch (halign) { case 'left': switch (valign) { case 'top': align = Phaser.TOP_LEFT; break; case 'center': align = Phaser.LEFT_CENTER; break; case 'bottom': align = Phaser.BOTTOM_LEFT; break; } break; case 'center': switch (valign) { case 'top': align = Phaser.TOP_CENTER; break; case 'center': align = Phaser.CENTER; break; case 'bottom': align = Phaser.BOTTOM_CENTER; break; } break; case 'right': switch (valign) { case 'top': align = Phaser.TOP_RIGHT; break; case 'center': align = Phaser.RIGHT_CENTER; break; case 'bottom': align = Phaser.BOTTOM_RIGHT; break; } break; } var rect = new Phaser.Rectangle(object.x, object.y, width, height); object.alignIn(rect, align); } However, I am still thinking how to change pivot after applying setTextBounds because it cannot be the same all the time! The fact that it's used in conjunction with scale is correct BUT it should be located in different places depends on vertical/horizontal align of text withing bounds.
  14. what exactly is pivot and what it affects

    Hello, I would like better understand pivot and how it's stored, calculated and what it affects. As it causes me troubles when I apply setTextBounds. May be someone can share link to article or tell me something? Thanks in advance
  15. pause the game using Phaser's timer class

    Thanks, no more questions =) I just need time to get used with Phaser's standards