I have an image in Pixi.js, and I want to apply a filter to it. This is simple enough, but I want the filter to actually change the image, so that the next frame, what is rendered is a filtered filtered image, and so on. How do I create a Pixi object that renders to itself every frame?
I found this, which seems to be asking a similar question, but I cannot make sense of the code provided or the responses.
Try using the PIXI.RenderTexture class to create an in-memory image and render to it what you want. The render texture will preserve what you've rendered previously.
Here is an example that does that: http://pixijs.io/examples/#/demos/render-texture-demo.js
Here are the docs: http://pixijs.download/release/docs/PIXI.RenderTexture.html
Note: To preserve contents when rendering to a texture you need to tell PIXI to not to clear the texture before rendering to it. The below line is from the linked example and the false value does just that:
...
app.renderer.render(app.stage, renderTexture2, false);
...
Related
I am trying to do a paint app. But that's not all. I want to extend it with possibility of layers like in gimp or photoshop. Some of layers can be visible and others not. It all depends of user needs.
I tried a lot. There are some of my ideas how to do it:
First i tried to add new canvases to html document and changing z-index of elements. The problem of this was that addEventListener didn't know what i did. I mean that it didn't know on which layer i am actually pressing.
Second idea was to take of all points (vertices) of line, put it in array and then redraw it. It all will happen in area of one canvas element.
The last one and i think the best idea was to have multiple 2d contexts. But i don't know how to make it invisible. I saw only ctx.globalAlpha property but it needs to be configured before drawing.
Maybe someone knows what is actually the best method to achieve it. I will be very thankful for every response.
I have an issue with render order in my scene. All objects have transparency. There are multiple child objects for each object in the scene.
Each scenario below uses the same data.
Option 1 below works as intended. But I need option 2 to work since the user of the application should not have to manually add data to the application.
If I manually add a set of objects in a specific order they render properly.
If I load all the objects at once and then add them to the scene in a specific order, the render order is wrong. I thought the documentation said they are rendered based on order added to the scene. I figure this would give the same result as option 1.
If I load all the objects and hard code renderOrder, the order is wrong since child objects have different depths in the scene.
I cannot figure out why option 1 and option 2 give different results. I would prefer to not use option 3.
Is there something else besides order of objects added to the scene that determine render order?
Here are two videos.
Correct Render Order
Incorrect Render Order
If you don't know what order they'll be added to the scene, you can force the render order by using the Object.renderOrder property. You'll probably want to render the background objects first, but this might give you problems when the camera is facing down the opposite direction.
If like you said, all objects have transparency, then you might want to disable depthTest so everything just ignores the depthMap when being rendered.
Let's say I just add a simple little image:
var image = scene.add.image(200,200,'simple-little-image.png');
Then later, I want to destory it. Not just hide it, but remove all of it's data and everything.
I checked the docs and the image class doesn't have any sort of kill or destroy function. However, it has an ignoreDestory boolean. Which makes me think the scene must remove it? But I cannot find a method for removing images in the scene class's docs.
And looking through the scene class in the console, I can't find any functions of it's children that would remove the image.
So, How do I remove the image and all of it's data?
While it doesn't have a kill(), an Image does in fact have a destroy() method.
You might already be aware, but just make sure you have access to the image variable where you want to destroy it.
i want to program a 2D-sqare Gamefield. The gamefield shall consits of 9 subfields. The Gamefield shall be an Image, like an Spacefield or so. Here you can see the concept, and how it shall later look like (just a mockup :P)
Within this field i want to move a Object from one field to the other (vertical /horizontal) . But i don't know how i can realize that. I had think of an multidimensional array, but i don't know if this is the right way to do this. I need to know, at which pixel in the image the new field begins. But i think its no good idea to code that hard. I want to do this with Jquery, CSS and HTML. It shall become a very simple online game.
Qapla'
In game development these fields are usually called tiles.
It's perfectly fine to create a multidimensional array of Tiles.
Whether they hold their own position or if it's up to a separate renderer is up to your design.
Some links you might be interested in:
Tiles and tilemaps overview (though this uses a Canvas-element)
Using CSS transitions for smoothly moving from one Tile to the next (not as useful when using a Canvas)
jQuery animate if you don't like CSS transitions, you can make use of jQuery as well.
I'd recommend reading up on Tiles in game development first, there are tons of example implementations.
I'm using x3d scene in a web page. In this page, I have an indexedfaceset which works fine.
I'm adding a <Color color="..."></Color> and it's working fine as well.
Now what I'm trying to do is to change the content of the Color using javascript once the scene is already drawn. Unfortunately the modifications aren't taken into account.
Do I have to force a redraw of the scene or something like that? I saw nothing on the runtime api of x3d.
Thanks
through x3dom?
if so check out my answer here. shows how to set attributes through both tag and id on js mouse events
i know your trying to change index face set color attribute but i think the below should give u a starting point. let me know if you need a more concise example
attaching attribute to x3dom object