Search the Community

Showing results for tags 'blend'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 8 results

  1. Hi all - new to the forum! I've been working on something recently and had to use a bit of a wonky (slow) workaround to get the desired effect and was wondering whether anyone here had had the same issue. I'm finding it difficult to blend two images together using a bitmask without first rendering the results to a separate canvas, then drawing the blended image from the other canvas to the 'main' canvas. All my images are the same rectangular shape, and also the same size. For simplicity let's say that the first image is solid blue and the second image is solid green. The bitmask image is a left-to-right gradient ranging from transparent to solid black. What I'm trying to achieve is to make the green image transition into the blue image without, as I say, using a separate canvas and then transplanting the result into the main canvas. Here's the JS that I'm using at the moment to achieve this in a separate canvas: context.drawImage(sprites, 96, 0, 32, 16, 0, 0, 32, 16); // Draw bitmap image context.globalCompositeOperation = 'source-in'; context.drawImage(sprites, 0, 0, 32, 16, 0, 0, 32, 16); // Draw green image over the bitmask context.globalCompositeOperation = 'destination-over'; context.drawImage(sprites, 32, 0, 32, 16, 0, 0, 32, 16); // Draw blue image under the current canvas content I should probably mention that all my sprites are in a single image referenced by 'sprites'. The reason why I'm forced to use a separate canvas is because I need to *first* render my bitmask on a transparent canvas (which my main canvas isn't, there's a solid background colour) in order to retain the bitmask's transparency. In this contrived example I could just create a transparent image sized gap in the correct region of the main canvas, then perform all my operations there. This is fine when the shapes I'm rendering cover the entire sprite rectangle, although I have a case where I'm rendering circle & diamond shaped sprites and this would result in transparent gaps appearing around the resulting shape in the canvas. I've been referencing this article in my use of 'globalCompositeOperation': https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation Am I approaching this in a reasonable way or is there a better tactic to achieve this?
  2. Disabling blending

    Hey everyone, I was looking at the documentation on BLEND_MODES and noticed there was actually no way to disable blending, equivalent of calling glDisable(GL_BLEND) on Desktop and ES OpenGL. On native mobile it increases performance when rendering fullscreen background images that do not need to blend (ie. they have no transparency in the image). Is there another way of achieving this I'm not aware of ? Thank you.
  3. How can I create a PIXI.Container with a transparent background which I can render on top of my main stage container? My goal is it to have 4 layers which contain PIXI.Sprites and PIXI.Texts: layer 1 should be rendered beneath the player layer 2 should be rendered above layer 1 layer 3 should be rendered above the player and above layer 1 and layer 2 layer 4 should be rendered above everything else for debug information In case I can cannot use multiple PIXI.Container then how else could I achieve this effect?
  4. Hello, I just finished writing a small tutorial on how to apply grayscale to an image without using WebGL, and without re-creating all your assets as black&white to show unavailable/disabled/locked modes. You can find it here: http://nightlycoding.com/index.php/2015/08/phaser-io-how-to-apply-a-grayscale-filter-tip/ If you only want the code and a quick example check out this codepen: http://codepen.io/netgfx/full/KpgLmV/ Let me know if you liked this technique!
  5. Hello. I've been experimenting and enjoying Babylon.JS; thanks for all the hard work on the library. I've been trying to blend loaded model bone animations and run into issues. The simplest case would be idle->walk->run loops. This has been mentioned a while back (pre v2) here, here, and here. While you can call custom animations on each bone (ie, arms get one frame set, legs get another), this doesn't help with easing between animations that use the same bone. Another suggestion was storing the combined animations in the model, but that doesn't allow for smooth transitions (or permutes up very quickly) As a learning experiment, I dove into the code. Here's a demo of my results. The babylon.js it references is a hack experiment where I do the following: 1) allow multiple animations per target by not calling stopAnimation(target) on beginAnimation 2) on every call to a scene's animation, pass along a cache 3) on every animation._interpolate() where datatype == Animation.ANIMATIONTYPE_MATRIX, write the matrix to the cache 4) if the animation._interpolate() has a cache hit, invoke the otherwise unused matrixInterpolateFunction() with a factor value to interpolate between the 2 matrix The result plays the animations, mostly. The result is flipped, both in normals and on the z-axis, which I don't understand (my grasp of matrix math is not great). Most of the work revolved around getting data passed between the otherwise isolated animation instances so they could be aware of the other animation to blend. This hack also doesn't handle an arbitrary number of animations to merge or an easy way to work with them, since calls to stop use the target as the common factor. What is the best way to approach this? Is there something I missed in the library? Or how could I implement this correctly for Babylon.js? Thanks
  6. Glow effect like geometry wars

    Title sums it up. I tried messing with PIXI blend modes like this: this.blend = PIXI.blendModes.ADDthis.blendMode = PIXI.blendModes.ADD But they didn't seem to do anything, I think I'm doing it wrong, and I couldn't find any Phaser examples. How do I add a glow effect to Phaser Sprites or Graphics?
  7. Noob problem with .blend files

    Hello, I am starting with 3D development so even though I know pretty much about JavaScript and CSS, all the concepts discussed here are new to me. I have followed the tutorials and now, I wanted to find a free 3D object on the web, open it with Blender and convert it to BabylonJS to go further and try myself at BabylonJS. I have installed "Blend for Visual Studio 2013" but reading the tutorial to import the file, I didn't find such file paths and it was not able to load the '.blend' file that I have found. Is it my version of Blend ?? I really feel it is a noob question but I couldn't find any other version to download... Could you please provide a few pointers to me ? Thanks a lot, Claude VERNIER
  8. A couple of months ago we had a blog post about adding blending in Canvas. At the time, the feature was only in the nightly builds of Firefox and Webkit. We’re excited to see that version 22 of Firefox now has this feature enabled by default. http://blogs.adobe.com/webplatform/2013/04/22/canvas-blending-is-now-in-the-firefox-release-channel/