Search the Community

Hello! This will be my first post here. RPG Maker MV is a small game engine which uses Pixi.js as it's main codebase. Because of this, pixi filters are compatible with the engine by way of this third party plugin. RPG Maker is a weird and finicky piece of software with a few strange pieces of design, so it's not entirely clear to me how far from standard pixi it is. I am looking to make a custom filter that involves both the limiting of a games palette to a set amount of indexed colors, as well as dithering those colors to create a smoother effect. You can see more details of what I have in mind here. What I want to know is, how would I interface a custom made filter like this with RPG Maker? Would it be relatively plug and play, or will I have to adapt a bunch of stuff to make it work? As a side question, is a dithering filter like this even possible, and if so, is it possible while not being too taxing to the average system? Thanks! I hope to hear from you soon!

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

Does anyone know how to disable wireframe mode and change body colors while using MatterJS for physics? I can see the following properties in the body's render object, but the color is not updating. It looks like wireframes are set to true by default (line 59) - https://github.com/photonstorm/phaser/blob/8af70d02d1f42a0b56e618840d27b2d1807848cf/src/physics/matter-js/lib/render/Render.js Thanks!

I have a image, it should not be displayed on the screen. But I need the color values of certain pixels. Exists in pixi analog getPixel from as3? If pixi doesn't exist a worthy counterpart, then the second question is how to translate a color value from a context.getimageData().data in the format 0x00000000, suitable for graphics.beginFill() ?

Hi everyone, I'm trying to port an avatar editor made with AS3. The original app makes use of the gskinner Color Matrix class for adjusting brightness, contrast, saturation and hue of each part and stores those values in a DB. So imo I have two options here: 1. Port the class to js and try to use the stored values as they are. 2. Find an algorithm to transform those values to use them with PixiJS Color Matrix Filter directly. As I'm not very good at maths I've tried the 1st option so I ported the class to JS and tried to use it as the matrix for the color matrix filter. Saturation and hue seem ok but I cannot make brightness and contrast adjustments to look similar in as3 and pixi. I've been digging a bit and I've found that in the gskinner class, brightness and contrast are tweaked through the offset column while the color matrix filter in Pixi aren't. I've noticed as well the use of 'colorMatrix.frag' which is a WebGL shader impl but I don't know anything about them so I'm stuck. Do I need to implement a new custom matrix color filter or even a custom colorMatrix.frag (although I don't know anything about shaders as I said)? Any clues on option 2? Is there any other option I haven't take into account may be? Any help or directions would be very much appreciated. Thanks so much! You can see the ported matrix color code here (and I've attached the as3 code just in case): https://www.pixiplayground.com/#/edit/DIPYaphRukZ6rBqIRupVv as3-color-matrix-example.zip

There is a COLOR CODES game at https://www.html5pcode.com/a1ycolorcodes.htm that was designed to teach the art of coding. It uses structured programming, so it is easy to follow the logic of the design. The game is divided into small self contained pieces. It has a main program and a subprogram. The subprogram has routines that perform specific tasks when they are called by the main program. The game has links to YouTube videos that describe the operation of the main program and the subprogram routines. Once you learn how to design games like this one, you can go on to design your own games in JavaScript and/or a JS framework. This p-code lends itself to teaching coding because the source and object code are the same. The engine that created the code (source-code) is the same engine that executes the code (object-code). This makes it possible to do the following options. A DATA OPTION allows you to view the game's data, while the game is running. A TRAIL OPTION allows you to execute a few instructions at a time, so you can see what each routine is doing. A REAL TIME (RT) OPTION allows you to change instruction values, while the game is running. The YouTube videos show how these options are used in the designing of the game. There are many other games written in this p-code at https://www.html5pcode.com

Hi! Why the color is not applied correctly in the material? I plan to apply a dark green color, but this being displayed a much lighter color, what can I do to fix this? RGB(0, 102, 0) https://www.babylonjs-playground.com/#B7B3UL#1

Hi, How can i use color code to change sprite color without using tint. Thanks,

Hello, I am using babylonjs to implement a 3D visualizations inside my app. The app allows a user to define a scene in a 2D view. The scene is static in the 3D view - meshes cannot be moved, edited etc. A user can interact with objects using mouse - selection by click, hover on mouse move, double click to open in another view. In my opinion the most natural way to present that something is happening when user moves mouse is to change meshes’ colors. Everything works well (50-60 fps) when there isn't much meshes – 300-400. Unfortunately, performance drops down when the scene becomes more complex – about 4k meshes. I’ve already tried improving performance by using: mesh instances (cause a lot of them have the same texture and vertex data) - unfortunately I haven't found a way to color a mesh instance on mouse selection. I found a method set/updateVerticesData but VertexData.ColorKind cannot be updated when mesh instances are used (an error occurs when I try to set argument makeItUnique to true) mesh clones - it works like I expected because clones do not share material, but the performance problem still exists solid particle system - when I started implementing and saw the results I was amazed and thought that I found a solution. But then I realized that I cannot use particles as parents for other meshes. Am I right? I’ve prepared a playground showing my problem. On the left-hand side of the scene (3 boxes) is my real use case. It shows how I use mesh parent system. On the right-hand side there are rendered boxes that represent objects in my scene. https://playground.babylonjs.com/indexStable.html#U0KFSU#5 I am afraid that I am bound to CPU due to having a lot of transparent textures and a lot of meshes. When I was profiling my scene a lot of CPU time was spent on recognizing which meshes are active (I freezed activemeshes on the scene by calling scene.freezeActiveMeshes()). Now i get around 12/13 FPS (measured with Chrome DevTool/Rendering and FPS meter feature), CPU usage (in windows task manager) is around 35%, GPU usage (in windows task manager) 19%. Is there anything else I can do to have at least 25-30 FPS and still react to mouse operations? Thank you in advance for any suggestions ?

I have this game with a salmon background color. I can set the background to the proper color into the create function with: game.stage.backgroundColor = '#f3cca3'; The problem is that it takes a little while preloading the images and sounds and so it stays black in the meantime. I tried: var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, 'meems_house', { preload: preload, create: create }); game.stage.backgroundColor = '#f3cca3'; But then it says 'Cannot set property 'backgroundColor' of null' indicating that it didn't find 'game' — however it doesn't make any sense because 'game' is NOT null as it was created one line above... PS: The only thing I can imagine is that although object 'game' was declared it was not properly instantiated yet because it's gonna happen into the create function — but this is still weird to me. Anyway I would like to know if there is a way to set the canvas background color before the create function... Thanks!

Hello, I believe I asked about this before on this forum, but I can't find the post anymore and I remember I remember people told me it wasn't a bug. But, I just want to make sure because this behavior is weird. When using the font color white for the TextBlock, I get a greyish color on small texts, is there a grey border around the text or something like that? Is there a way to remove it?

Hi all, I want to ask about StandartMaterial, if I add to material a ambientColor or a diffuseColor or a specularColor it means that this colors mix with material.texture colors in every frame, or just at once and then new colors saves somewhere in buffer. Need to know this for performance, if all colors mixes every frame I think this bad for performance and I will be find some other ways. Thanks : )

I do have only ONE big mesh imported to BabylonJS. I need to visually highlight a small part (let us call it HotSpot) of the big mesh. What I did so far: Extracted all the positions via getVerticesData Collected the vertices Filtered only vertices of interest (HotSpot) So I ended up in an array vertexMapHS comprising all the HotSpot vertices. Now I need to either highlight using a HighlightLayer or apply a different color all the vertices in vertexMapHS. Does anybody have a hint how to do that? Here is the playground of what I have got so far: https://www.babylonjs-playground.com/#XG8RH3#7 Thx in advance

I am trying to add a tilemap with phaser.js and I seems to change slightly the color pallete of the tilemap. It has a totally color when editing on Tiled. Is it normal? Is there some way to change that? Thanks in advance

https://www.babylonjs-playground.com/#9HEBCE#27 When you turn ti the right you see a reflection on the floor. How can I set the specularColor in a customMaterial to reduce the amount of specularity?

My understanding is that every instance of a material requires a separate draw call. In a scene with many similar meshes, it would be nice to have them share one material but have basic differentiation by color or transparency. Is this possible without creating many materials or looping over lots of vertex data? In other words, does the standard material shader allow for color as an attribute that can be set per mesh?

I've just removed the prefix "solved". As a matter of fact, I've made a mistake by stuffing 5 issues in one post. The first issue has been responded to, the others not. Next time, I'll start more focused topics. Two issues have to do with my lack of experience (and shortcomings in the documentation) see #1 and #4. Points #2 and #5 are questions/suggestions regarding the functionality. I believe those are of interest to other forum users. For me, there is a simple workaround: will use a fixed-size font. Point #3 is something I've incidentally discovered while testing, but of no further interest to me. .............................................. I have used the GUI extension and basically it does what I need. See https://www.babylonjs-playground.com/index.html#RBP60B#8 Yet I have several questions and suggestions. 1. The background color of a container, in my case an instance of BABYLON.GUI.Rectangle is assigned by a string value ("black", "white"...). Which colors are possible? I would prefer to use BABYLON.Color3(...) 2. What I need is a 'sticky' label. For that, I create a rectangle and used it as a container for a TextBlock and that works fine. However, what I would like to have is that my label would be transparent or semi-transparent and the text not. In the present implementation, if I change alpha of the rectangle, it seems topropagate to child controls (my TextBlock), so the text becomes also semi-transparent. I believe this is a small bug: if I want the text to be semi-transparent, I can change the alpha of the TextBlock 3. I can link a TextBlock directly to a mesh. However, in that case I cannot change link offsets (linkOffsetX, linkOffsetY ...). Apparently, linkOffsetY has some value (100?) and the others are 0. Wouldn't it be a welcome feature? 4. Vertical text alignment of a TextBlock can be controlled by setting textVerticalAlignment to 0, 1 or 2, but I could not find it in the documentation. 5. Apparently, the object TextBlock has been designed to work in conjunction with some container object. Otherwise, it has no boundaries so it cannot decide on text wrapping. Is it possible to let the container (a Rectangle, for example) to be resized to match the text size (this would need to be somehow reconciled with wrapping - maybe like in MS PowerPoint). The simplest possibility would be to enable the programmer to do it. For example, to introduce a method that would return the "bounding box" of a text with the preset width and word wrap (Y/N). If I would have something like that, I could decide dynamically what container size I would need and whether to truncate my text.

I'm displaying some items in the "billboard" mode: https://www.babylonjs-playground.com/index.html#20K47P#1 The items would need to maintain the same color (or change it just a bit with the camera rotations). I believe it must be very simple to do, but, still bein a novice, I do not know how ....

Hello, I'm wodering why colors in Blender are diferent shown as in BJS-Sandbox? Even the color picker is showing a different color, is there a different color model ? The image below is showing the BJS-sandbox (orange) and the Blender-Picker (more yellowish), the numerical values are identical. Thanks in advance. PS: I verified the image below with the color-picker from Gimp and the values matches the BJS-color :). So the problem seems to be on the Blender side.

I'm trying to create an effect where a shape inverts the color of everything it covers. Imagine two Container objects, one rendered behind the other, the one behind is the "main stage" with all the graphics, and the one in front of it contains my shape, I want that shape to invert the color of everything behind it on the first container, that shape is animated too. I just used containers to explain what I want to do, while it is what I have in my current code, I'm open to any solutions, thanks. P-S : Is there really no real-time chat anywhere? Irc, Discord, etc.. It's a shame such a widely use library doesn't have anywhere where to discuss and talk about everything pixijs related..

How can I set the color of a Phaser Line? var line = new Phaser.Line(0, 0, 100, 100); I did not find any info how to change the color from green to anything else. Official example: https://phaser.io/examples/v2/geometry/line Thx PS: Same problem with line width.

var name_text = new PIXI.Text(name); name_text.style.font = "bold 10px arial"; name_text.style.align = "center"; this.imageContainer.addChild(name_text); How do I change the color ! aaa

Is there any possibility to set custom color in Sprite2D? For now there is only opacity property.

Hi! I am new to phaser. I have a sprite called Ground in the group called Platforms var platforms = game.add.group();platforms.enableBody = true;var ground = platforms.create(0, game.world.height - 30, 'ledge');The ground sprite has to be white,I use this line of code for that ground.tint = 0xffffff;I don't know why but it does not work with the color white,it works with any other color but not with white. Thanks for help

I need some help with color math. I am trying to create height maps in code... i can read raw terrain data and get the float raw height value for each pixel (x,y) as a value from 0 to 1 0 being black and 1 being white. I need to convert that 0 to 1 float to a black and white pixel based on the level of 0 to 1. Here is an example code block.. I need to basically create a Color.FromFloat type function as listed below: Texture2D duplicateHeightMap = new Texture2D(terrain.terrainData.heightmapWidth, terrain.terrainData.heightmapHeight, TextureFormat.ARGB32, false); float[,] rawHeights = terrain.terrainData.GetHeights(0, 0, terrain.terrainData.heightmapWidth, terrain.terrainData.heightmapHeight); /// run through the array row by row for (int y=0; y < duplicateHeightMap.height; y++) { for (int x=0; x < duplicateHeightMap.width; x++) { // height map color (0 to 1) float rawHeight = rawHeights[x, y]; // NOTE: HERE IS WHERE I NEED HELP (MAYBE GRAYSCALE ???) Color color = Color.FromFloat(rawHeight); duplicateHeightMap.SetPixel(x, y, color); } } // Apply all SetPixel calls duplicateHeightMap.Apply();