Search the Community

Showing results for tags 'gradient'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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 13 results

  1. Adding gradient background

    Hi, I'm having issues trying to add a gradient to the background of my platformer game. I have worked out that, due to the WebGL renderer, the images used need to be either square or width = height x 2. My issue is that the stage is width = height x 4. I thought I could just add two image layers and align them next to each other with the "repeat" property set to "no-repeat" but this does not work. Even though the offset for my second level is correct the image is getting repeated over the first image. Is there a better solution. What I need is a gradient that goes from dark to light top to bottom but also changes from left to right so that it feels that night is falling as you walk through the level. I hope this makes sense, you help would be much appreciated. Thanks Dave
  2. Create gradient filter on sprite.

    Hi, I've been struggling to create a gradient filter over an sprite using shaders. I have this and is working fine: On the other hand this code creates a nice gradient: precision mediump float; // start and end colors vec3 color1 = vec3(0.0,0.0,1.0); vec3 color2 = vec3(1.0,0.5,0.0); void main( void ) { vec2 uvs = vTextureCoord.xy; vec3 mixCol = mix( color2, color1, uvs.y ); gl_FragColor = vec4(mixCol, 1.0); } But I can't apply that gradient to the image as the first sample. I tried this, but it still generates a solid color on top of the image: precision mediump float; varying vec2 vTextureCoord; varying vec4 vColor; // start and end colors vec3 color1 = vec3(0.0,0.0,1.0); vec3 color2 = vec3(1.0,0.5,0.0); uniform sampler2D uSampler; uniform float customUniform; void main(){ vec2 uvs = vTextureCoord.xy; vec3 mixCol = mix( color2, color1, uvs.y ); vec4 fg = texture2D(uSampler, vTextureCoord); fg = vec4(mixCol, 0.5); gl_FragColor = fg; } I'm not very familiar with the Shaders specific stuff, but definitely I'm missing something here. Any help will be appreciated. Thanks, Rodrigo.
  3. Gradients in pixi4

    What's the latest recommended way in pixi4 to draw linear gradient in Sprite, without using and image for texture (run time gen.)?
  4. Hi All, I would like to have a gradient background in my application. For example: What is the best way to achieve this in babylon js? Regards Rajkumar
  5. Hi! I'd like to create material with gradient and transparency effect as show on the image bellow (green, yellow and aqua color circles, everything else is irrelevant). After some searching I found gradient material, but it uses BABYLON.Color3 which doesn't support transparency. How can I achieve desired effect?
  6. Hi, Basically I am a programmer. I am not sure whether this question is valid for this forum or not. 1. I downloaded a free fbx house model. 2. Import it into and attached textures, lights and camera. 3. Export it into .babylon. After render it into babylon it showing some black gradient marks. Can anybody tell me why this is coming and what should I do to resolve this problem. I have attached an image for reference. Also please let me know, necessary steps all modelers should take care. Thanks Somnath
  7. Gradient images from Tiled

    Hi, I'm well on my way to completing my first game with Phaser, but I have a small problem with my background image. The problem is that it's using gradients, and it will not show up in the game, only a small part of it (which ignores the gradients). I'm importing a json-file from Tiled which has a layer called "background", and that background has a big blue gradient png-image (tile) which acts as the background image. Now, when I import it to my game in Phaser everything looks great, EXCEPT for the background layer. It just shows a small strip of it at the bottom, and it's not even gradient. Everything else is just black. What should I do to make it work? I have tried adding just a standard image and preloading it in my main js-file, but then the image is just flat blue, without gradients. Even though the image I'm using is gradient. I've also tried cleaning my cache and all that. Thank you very much for all the help you can provide.
  8. How to create a linear gradient

    Hi, I am new in html game development, so my question can be simple-minded, sorry for this. I did some research and I understand that PIXI is not suppot gradient fill. It is possible to fill by one color and alpha. Is there trick that allow to create linear gradient and allow to keep PIXI style? Thanks
  9. Linear Gradient with a Tween

    Hi guys! One question, Can I do linear gradient to bitmap with a tween? Thanks for your help! Regards, Nicholls
  10. Hey, I'm having from trouble with the BitmapData module. When I assign a radial gradient to Phaser.BitmapData.ctx.fillstyle, nothing I draw renders to the screen. The code below in in the 'create' function. var gradient = bitmap.ctx.createRadialGradient(x,y,0,x,y,radius);gradient.addColorStop(0.5,"white");gradient.addColorStop(0.4,color);gradient.addColorStop(1,"black");bitmap.ctx.fillStyle = gradient;,bitmap.height/2,10);I know my other code is working because when I make the fillStyle = '#FFFFFF', I get a white ball. Does the BitmapData module allow me to set radial gradients as the fillStyle? It is my understanding that anything I can do on a canvas I can do with BitmapData. Or is there something I'm overlooking? I need help! Please and Thank You.
  11. Gradient background

    I am a total beginner with phaser and graphics programming so pardon my newbness. I am trying to do something similar to game.stage.backgroundColor only I want backgroundGradient. The only gradient methods seem to be for BitmapData however. Furthermore I can't even get any BitmapData to render. I just want to make my stage have a background gradient. Can somebody help me? Thanks! P.S. I have looked at this similar phaser post but couldn't make the canvas example work.
  12. WebGL Gradient Shader

    Hey everyone, I am trying to learn WebGL and would like to have shader that gives a mesh a gradient effect from top to bottom. For example, the bottom of a ball having no blue color and the top having all blue. I know I need to modify the fragment color with the y component of gl_Position but my implementations have thus far given me a black screen. Any help would be appreciated.