Search the Community
Showing results for tags 'gradient'.
Found 17 results
-
please i need help!! //Here is the gradient function function Gradient(x, y, w, h, startColor, endColor){ let p1 = x+100 let p2 = y+50 let p3 = x+w-100 let p4 = y+h-80 let cvs = document.createElement('canvas') cvs.width = window.innerWidth-20 cvs.width = window.innerHeight-20 let ctx = cvs.getContext('2d') let grd = ctx.createLinearGradient(p1, p2, p3, p4) grd.addColorStop(0, startColor) grd.addColorStop(1, endColor) ctx.fillStyle = grd ctx.fillRect(x, y, w, h) return new PIXI.Texture.from(cvs) } //This is the params let x = 240 let y = 100 let h = 200 let w = 200 let a = new PIXI.Graphics() .beginTextureFill(app.Gradient(x, y, w, h, '#ff0000', '#00ff00')) .drawRect(x, y, w, h) .endFill() app.stage.addChild(a) My output is this: a red rectangle???, why?... If i use this code in javascript without pixi.js
-
How can i recreate this soft gradient color and animate it?
-
is there any way to do a gradient tint in sprites/images in phaser? i'm using canvas mode , not auto or webGL Thanks. Sorry, for bad english :|
-
Hello, is it possible to create a PBR Gradient Material?
-
Hi all, I want to make a gradient material, which has silver color from top and purple color at bottm ( pls. see attached pic); I found "babylon.gradientMaterial.min.js" this file from github. and copied code from https://doc.babylonjs.com/extensions/gradient ; var sphere = BABYLON.Mesh.CreateSphere("sphere", 32, 2, scene); var gradientMaterial = new BABYLON.GradientMaterial("grad", scene); gradientMaterial.topColor = BABYLON.Color3.Red(); // Set the gradient top color gradientMaterial.bottomColor = BABYLON.Color3.Blue(); // Set the gradient bottom color gradientMaterial.offset = 0.25; sphere.material = gradientMaterial; but I came across the problem with "Uncaught TypeError: Cannot read property 'getTextureMatrix' of null" Can anybody help me what caused this error? can you suggest any other solution to gradient effect, except shadows, coz it's quite hard for me to learn in short time in my project. Thanks in advance.
-
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
-
Hi, I've been struggling to create a gradient filter over an sprite using shaders. I have this and is working fine: http://codepen.io/rhernando/pen/ORxWwO?editors=1010 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.
-
What's the latest recommended way in pixi4 to draw linear gradient in Sprite, without using and image for texture (run time gen.)?
-
Hi All, I would like to have a gradient background in my application. For example: https://github.com/mattdesl/gl-vignette-background What is the best way to achieve this in babylon js? Regards Rajkumar
-
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?
-
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 Clara.io 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
-
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.
-
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
-
Hi guys! One question, Can I do linear gradient to bitmap with a tween? Thanks for your help! Regards, Nicholls
-
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.circle(bitmap.width/2,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.
-
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. http://www.html5gamedevs.com/topic/3330-gradient-fill-on-text/
-
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.
