All Activity

This stream auto-updates     

  1. Past hour
  2. Oh , sorry, I gave wrong link playground doesnt like UTF characters https://www.pixiplayground.com/#/edit/Ql9uafhDGLiqT2lx7xvG0 Thats what was in my jsfiddle. Hope it helps. That's the code i made less than in hour after your first post. I'm sorry it took two days
  3. Today
  4. jar4563

    Image data

    I am having issue with the transparency, the alpha = 0 turn into white even I'm skipping alpha = 0 pixels Edit: I think it's because the canvas is white by default. anyway to make it transparent?
  5. jar4563

    Image data

    @grelf nice. i just use notepad++ because it's light weight Edit: Nvm it was just the console.log that lagged
  6. grelf

    Image data

    Ah, yes that makes sense. I was just about to write that the "cross-origin" thing was a clue. I use Netbeans IDE (free) which has its own lightweight localhost server so I can run tricky things from local files without me having to set anything else up.
  7. thank you very much here it is https://www.pixiplayground.com/#/edit/3s-IQ3i-gizAoc5nMonKy if i want it to be the center of rectangle, is there some solution?use (300,300) rather than something else, thx
  8. jar4563

    Image data

    nope did not. thx Edit: fortunately this was fixed by: --allow-file-access-from-files argument for chrome
  9. grelf

    Image data

    I would create the onload function before setting flag.src, so the event handler is available before loading starts. I am not sure whether this will solve your problem but it might.
  10. jar4563

    Image data

    I have some weird error when I try to use getImageData() code: flag = new Image(); flag.src = "flag.png"; //flag.crossOrigin = "Anonymous"; testImageData = null; flag.addEventListener('load', function() { var canv = document.createElement("canvas"); canv.width = flag.width; canv.height = flag.height; var ctx = canv.getContext("2d"); ctx.drawImage (flag, 0, 0); console.log(">>> " + canv + " " + flag + " -- " + flag.width); testImageData = ctx.getImageData(0, 0, canv.width, canv.height); } , false); error: test.html:51 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. at Image.<anonymous>
  11. Here you go: https://www.pixiplayground.com/#/edit
  12. Aaaand one more flash integration plugin Congratulations! added to https://github.com/pixijs/pixi.js/wiki/v5-Resources#tool-integration
  13. https://github.com/Hocti/PIXIMC you don't need any adobe animate plugin, just use the "generate texture atlas" function in adobe animate then you can read them in to pixi.js by PIXIMC. Here is a pixi.js demo: https://piximc.s3.amazonaws.com/demo/demo_scene.html and the original swf file: https://piximc.s3.amazonaws.com/demo/demo_swf.html I reproduce almost all animation and graphic functions, but it's not my final goal still. I will make some extra functions that adobe doesn't provided: 1) changing MC skin 2) playing with "action" like spine So I can draw some Stickman animations to create game sprites in a super quick way , and maybe find a better illustrator to redraw it as a new skin I hope someone will find it useful.
  14. grelf

    Image data

    No. In fact it may be faster (depending on browser implementation) because drawImage() is more flexible, capable of rescaling the image.
  15. jar4563

    Image data

    ok thx. but will putImageData be slower to use when compared to the drawImage?
  16. grelf

    Image data

    putImageData() into the main canvas using the ImageData object that you have been working with from the hidden canvas. The ImageData object, once obtained, is not tied to any particular canvas, it is just a collection of pixel data.
  17. jar4563

    Image data

    this is probably a stupid question but after done with the new canvas how to draw that to the main canvas? I probably have to keep in store all the canvas with changed flag colors?
  18. grelf

    Image data

    var cnv = document.createElement ('canvas'); cnv.width = im.width; cnv.height = im.height; var g2 = cnv.getContext ('2d'); g2.drawImage (im, 0, 0);
  19. jar4563

    Image data

    aah didn't know that was possible will try it, thx!
  20. grelf

    Image data

    Load the image When it has loaded create an off-screen canvas of the same width and height Get the context of the canvas Draw the image into it getImageData() and use the methods I showed before to access the pixels
  21. jar4563

    Image data

    hey @grelf thx for the code but how do I apply this to the image? what I am trying to do is have a single .png file with flag shape in it and then change the color of that flag according to the team color Edit: And what I should have said is that I have done this type of thing before, many times. I just can't figure how to get access image's data
  22. grelf

    Image data

    Yes. context.getImageData() gets you an object with 3 properties: width, height and data. The last of these is an array of pixel data. 4 elements per pixel: red, green, blue and alpha. The last means transparency. You can read and write the elements of this array as you like and then context.putImageData() when complete (don't put after every change - performance would be awful). I usually add 2 methods to ImageData for pixel read/write: /* Returns an array with 4 elements: RGBA. */ ImageData.prototype.getPixel = function (x, y) { var i = (this.width * Math.round (y) + Math.round (x)) * 4; // NB: JavaScript will try to index arrays with non-integers! return [this.data [i], this.data [i + 1], this.data [i + 2], this.data [i + 3]]; }; /* rgba is an array with 4 elements: RGBA. Ignores transparent pixels (A = 0). */ ImageData.prototype.setPixel = function (x, y, rgba) { if (0 === rgba [3]) return; var i = (this.width * Math.round (y) + Math.round (x)) * 4; this.data [i] = rgba [0]; this.data [i + 1] = rgba [1]; this.data [i + 2] = rgba [2]; this.data [i + 3] = rgba [3]; }; Generally when I am wanting to do things on the canvas I do it in stages, some stages use standard context methods, other stages switch to pixel data as above. Keep the number of switches small.
  23. jar4563

    Image data

    Hi is it possible to access pixel data of single image in javascript? I have only found example of people using context.getImageData() to get the canvas pixel data but I need the image data so I can draw different color of images. is this possible? thx!
  24. I am loading many assets in my game. Buttons are one of them. On load, buttons are visible but not clickable. afer 1-2 sec they re taking input. Please help on this issue.
  25. here is the code https://jsbin.com/gimulid/2/edit?html,output
  26. the real thing i wanna do is changing the color of every pixel within the circle by the distance between itself and center, THX actually what i am finding is a way to measure the distance between fragments and the center point ,but i cant transform them into the same coord system
  1. Load more activity