Search the Community

Showing results for tags 'blending'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 9 results

  1. Hello, I'm using Phaser CE trying to make a very simple game were two cowboys shoot them but in the middle there is a Cactus which gets destroyed with every shot. I followed this example run nice in every browser. So I have almost everything working in chrome but in Firefox I cant see anything drawn over the BMP. It's hard to simplify my original code. So I tried to build a very simple one to showcase my problem by extracting code from the example link. I just want to draw a whole when pressing key A. I also tried with different blending modes. It still does run ok in chrome but not in FF nor safari. Has it anything to do with my code or with the browsers...? var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var background; var landBMP; function preload() { game.load.image('land','assets/images/land.png'); game.load.image('background','assets/images/background.png'); } function create() { boomKey = game.input.keyboard.addKey(Phaser.Keyboard.A); boomKey.onDown.add(drawBoom, this); // Load Background background = this.add.sprite(0, 0, 'background'); // Load bmp data landBMP = this.add.bitmapData(992, 480); landBMP.draw('land'); landBMP.update(); landBMP.addToWorld(); } function drawBoom(){ landBMP.blendDestinationOut();, 400, 60, 'rgba(0, 0, 0, 255'); landBMP.blendReset(); landBMP.update(); } function update() { } Any help is apreciated PS: I attached my results with chrome and firefox after pressing A key
  2. 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
  3. Hello, fellow Phasorians! Using Phaser 2.2.1 and Canvas renderer. I have a weird problem which is most probably not a bug within Phaser, but it's something that I'm doing wrong. I've added a text instance using game.text.add(20,20,"hello",style) in the create() method, but for some reason it doesn't show up! I'm also rendering a tilemap on the canvas (tilemap is created AFTER the text instance). When I enable the layer.debug on all layers and set some alpha values around 0.3, I can see the text! However it's not the color I've defined (white fill with black stroke), instead it blends with the background (tilemap). If I don't set the style (black font), it doesn't show at all. I create the text instance within the create() method and the tilemap instance after the create() has been executed. I've tried setting the text.z property, but it doesn't seem to make a difference. I'm not currently posting code, because I have feeling it's something really obvious I'm missing!
  4. Hi, I don't know how to describe or if it's the right term in the title.... I'm importing a kinematic model/hierarchy from blender (mesh with multiple submeshes) and have to change the transparency of the whole mesh. My problem is that the meshes are partially overlapping. Here is a simple playground: I think it's self-explanatory. Is it possible to make Babylon use the distance vertex-camera for alpha blending and not the distance center-camera?
  5. Hi guys. I'm new to WebGL and other related stuff and I'm learning shaders. I haven't used pixi other than creating scene with a sprite and applying my shader to it following basic examples on Pixi site and some codepen I've found. I have created the shader I want to use on the ShaderToy. What it does is it creates some cool pattern out of given color, changing it from black to white through the mentioned color. If I were to apply it to the real scene, I would use Screen blending mode (which is pretty easy when you are writing shader, just invert colors, multiply them and invert back again) - that way black would be fully transparent and white would be fully opaque. Basically, I want to create sophisticated glow with some pattern. My question is, if I don't have the background in my shader, how do I perform blending? Do I blend the sprite I used shader on instead, is it possible with pixi? If I don't want to have my sprite blended, just the glow effect - what would be the best solution? I can only think of making 2 copies of the sprite at the same spot, one fully transparent with the glow blendend in screen mode and one without any glow (my Photoshop experience suggests this ). I'm asking here because I plan to use Pixi and learn it, but I just started off with the shader effect since another friend of mine is working on pixi project and I want to help him with visuals.
  6. Will there be ever animation blending, transiting for BABYLON ? it's so great engine...... but for game genre I would like to do with that I need that smooth transitions.
  7. When increasing the graphics lineWidth and lowering its alpha, the outcome seems weird. See attached. This is a part of some blue filled shape drawn on a green background (the line's blue is a bit darker than the fill's blue). Notice how the line spans both the filled shape and the background, creating the illusion of 2 drawn lines. The problem is, the line is centered on the boundary of the filled shape. Is there an option to have it grow on its inside instead (so that it is touching, not centered on, the boundary)? It not, any ideas for a work around? Thanks!
  8. First of all what i am trying to do: Imagine a fiery ball that goes near thing that make them appear lighter... i am trying to make a glowing ball that blends with certain objects. So imagine a scene in which there is a background, some other stuff, and rocks. A glowing ball follows mouse with opacity halfed. now this ball of light needs to blend in addition to being opaque with rocks and not with background and other stuff. My approach: not saying it's the best but i intended to make two glow balls one that was opaque and one that would blend with objects and would remain masked out other wise. It's mask would be all object that it need to appear on. But there is not a way i can find to do it. I would like to have a group of sprites to which i can masks this so this firy ball only appears when it's over them. doing this gives error fireball.mask=sprite_object.
  9. Hi all First of all, I wanted to thank/congratulate the creators of pixi.js; it is a great library! However I'm trying to achieve a relatively simple effect, but can't seem to figure out how. I've been playing around and looking through documentation, and it seems there is no way to blend color with a texture? I've tried masking, but as the description says this only appears to use the shape, not the color, of the mask. Is there a way to do this in pixi? If so, how? I'm using the autoDetectRenderer, as I want to support webGL and canvas devices. Obvisouly this would be easily doable with access to OpenGL, but I'd like a versatile solution that supports canvas as well. Even flash has this capability, I couldn't imagine it not being possible with HTML5/Canvas. Why leave this feature it out of such a great rendering engine? Or am I missing something? If you're unsure of what I'm trying to achieve, for example: I could have a single white sprite texture loaded in once, and blend the color of each sprite object to have different colors of the same image. This comes in very handy for particles and other effects, while greatly reducing assets. Thanks in advance!