Search the Community

Showing results for tags 'renderer'.

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
    • Haxe JS
    • Kiwi.js
  • 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 30 results

  1. I am creating a game, where a lot of tiles need to be rendered. My goal is to render with this method at least 500k tiles. Since the tiles won't be redrawn every time but moved, this method should work out. I am using the pixi-tilemap library to create a fast & simple renderer to render a dynamic tilemap. The renderer approves itself to work, but .position.set seems to pull the tilemap from the interface away. I know, the function .position.set does not contain the same parameters as the one of the demo, however this function also does not work with the parameters of the demo. Some parameters must be added. The tutorial I have been using this classic demo:
  2. Hi, i want to do something like this in phaser : I've been learning webGL because i think it must be done with webGL, but if someone can tell me how i can do this effect in phaser3 it can be cool ^^.
  3. Hi all, currently I'm read master RICH's tutorial for improve performance by batch texture. when I use the firefox dev tools canvas capture in the article it works when I use canvas renderer, but when I change to webgl, it can not capture the analysis. FF shows error and break the app. TypeError: methodSignatureEnums is not a function-----------------call-watcher.js:168:34 I tried many version of FF and phaser. none of them can work. is there anyone tried this before and works. please give me a workable FF version, many thanks
  4. Not sure if here's the best place for this but since it is not a bug etc I avoided opening an issue on github I stumbled upon some odd rotation code in phaser while reading From src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js and src/pixi/display/Sprite.js // Rotate matrix by 90 degrees // We use precalculated values for sine and cosine of rad(90) a = a0 * 6.123233995736766e-17 + -c0; b = b0 * 6.123233995736766e-17 + -d0; c = a0 + c0 * 6.123233995736766e-17; d = b0 + d0 * 6.123233995736766e-17; Ok. Some rotationcode with fancy precalculated values. But: the value given in e-notation is 0.00000000000000006123233995736766 and therefore effectively zero. Which makes sense since this was meant to be the precalculation of cos(rad(90)) - which equals exactly to zero. I suppose the literal resulted from a rounding error when someone typed Math.cos(Math.radians(90)) into a console So a better version would be: // Rotate matrix by 90 degrees a = -c0; b = -d0; c = a0; d = b0; Maybe someone sees this and is willing to fix it on the side...
  5. Morning! Just working on a bit of a debug console for my game, was just wondering if it was at all possible to switch the renderers at runtime? Have tried a couple of methods, but it just halts the code from executing I think (no error), but guessing it would be a nogo?
  6. Hi guys, I tested my game on ipad4, and sometimes a few sprites can not be displayed(most of the time is the bg image), but the rest are rendered normally, since it does not happen every time, and it only happen on ipad4, moreover, it does not pop out any error, it's really hard to find the cause, does anyone know what could be the possible cause to this sort of partially render problem?
  7. Hi All, TLDR: i really just want a javascript sprite rendering engine, is Phaser right for me and/or with 3.0 will i be able to just use that part of the engine? I am about half way through my first phaser game and am loving it. Because of the nature of the game, i am using very little of the engine. All I am currently using the engine for is input buttons and sprite rendering. No physics, movement, world updates etc... I am using all my own code for doing movement, collision, updates, etc.. In the current phaser version, i am starting to see some slowdown on mobile browsers. I still have some obvious optimization to do which will help but i am at a point now where i could move things around easily since basically everything is just pure javascript. The hooks are not deep into Phaser at all. I read with 3.0 we would be able to add and remove things from phaser to match what we need, is this still the plan? Would i be able to just use the Sprite Render and Button/Input parts? Is there another engine that might be better (maybe just straight PIXI). Or should i just use Canvas and make my own simple sprite management? Any advice from you guys with experience would be much appreciated.
  8. Hello there! I have created a game with this amazing engine and Tiled app. I've added a scrolling background image layer to the map in Tiled, but when i modify the renderer to or in the function in the js file, the background imagelayer doesn't show up to me. If I use the canvas renderer than it's working fine. I've tested this three different application with the latest melonjs and boilerplate. Is it a known issue? It would be great if someone could give answer for me. Thanks!
  9. Hi. Im fairly new on Pixi and im trying to do something with multiple renderers. I know i could add multiple canvas instead, however i need a dedicated webgl renderer to manipulate the transform and try to do some trapezoid forms. I also need both renderers to works on the same canvas to avoid creating multiple layers on the document.body. My approach was: 1. Have a main renderer and a main stage. 2. Have a sideRenderer that will be affected by different transforms (using gl.uniformMatrix4fv to change the shape of the whole renderer and achieve different shapes) and a sideStage that will hold any content (in this example, a simple sprite). 3. make the sideRenderer render to a RenderTexture, which will be the source of a Sprite, which will be added on the main stage. So in theory, anything that the side renderer renders to the RenderTexture should appear on the sprite on the main stage. If somehow i modify side renderer, the transformed output should be shown on the RenderTexture, if that makes any sense. I tried this with this example, and it doesnt works. If i append the sideRenderer.view to the document.body, it renders as expected, but its not what i want, as i need it to be part of a more complex logic. At some point this makes me realize that i cannot mix renderers like this ( maybe the sideRender is still working on the back while the mainRender is trying to render an incomplete RenderTexture ? ), cannot make one renderer render something for another renderer (sideRenderer to mainRenderer or viceversa), so i would like to know if there is any workaround or any way to override this behavior? Thanks for the help var renderer = null; var sideRenderer = null; var stage = null; var sideStage = null; var WIDTH = 1000; var HEIGHT = 500; var rt = new PIXI.RenderTexture( 1000, 500 ); var spriteRt = new PIXI.Sprite( rt ); init(); function init() { var rendererOptions = { backgroundColor: 0xffffff, transparent: true } // Create the renderer renderer = PIXI.autoDetectRenderer( WIDTH, HEIGHT, rendererOptions ); sideRenderer = PIXI.autoDetectRenderer( WIDTH, HEIGHT, rendererOptions ); // Add the canvas to the HTML document document.body.appendChild( renderer.view ); // Create a container object called the `stage` stage = new PIXI.Container(); sideStage = new PIXI.Container(); stage.addChild( spriteRt ); var loader = PIXI.loader; loader.add( 'texture', './media/crate.png' ); loader.once( 'complete', onLoadedAsset ); loader.load(); } function onLoadedAsset() { var texture = PIXI.Texture.fromFrame( './media/crate.png' ); var sprite = new PIXI.Sprite( texture ); sideStage.addChild( sprite ); update(); } function update() { sideRenderer.render( sideStage, rt ); renderer.render( stage ); requestAnimationFrame( update ); }
  10. Hi there, for some low performance devices, phaser's webgl renderer doesn't work, but when I try pixi V3, it goes well, so I am wondering is there any chance to use PIXI V3 renderer in Phaser?
  11. Hi all, I'm using Spine and for that matter I'm using spine-runtime, their own JS library (phaser plugins were clearly not as complete / up-to-date). To use this lib I had to create a custom object (a SpineObject), and to implement its _renderCanvas and _renderWebgl methods. For the canvas, I managed to properly render the animation. Works like a charm. For WebGL, however, I'm struggling a lot. I don't know WebGL, which doesn't help. What happens is that I can't manage to make both renderers (Phaser and Spine) coexist. I can display my SpineObject OR the Phaser scene. Do you guys have any tips for coding such features? Any good advice on how to use two WebGL renderers, what to do and what to avoid? Thanks a lot
  12. Warning! Your TAB in browser will freeze.
  13. We're coming to a point soon where most recent browsers on mobile support WebGL and am thinking about axing the canvas renderer to further minimize phaser build size. I don't see a way to exclude the canvas renderer in a custom build... I realize it's part of pixi and maybe that's why it can't be separated out, but just wanted to know for sure if it was not possible. Thanks
  14. Hello all, I was wondering, is there a way to change the used renderer at some point after the game has been created.
  15. Hello, after using csg there are two edge lines that shouldn't be there I think. Can this be corrected somehow? Thanks!
  16. Hello, I have found the following bug: When you use "convertToFlatShadedMesh()" and then enable EdgesRenderer it will render the triangles instead of the edges. This even happens with a simple cube also. Playground:
  17. Hello everyone ! I need to know if there is a way in Pixi to add width to the renderer view without scaling the content. I already tried using renderer.autoResize = false with no success. For example : // First I set the height of the view var h = window.innerHeight-100; = h + "px"; // Then, I set the width with the good factor to keep everything in a good shape = (h*2.666) + "px"; // I would like to be able to add width after without affecting the shape of the sprites[missingWidthToFillTheScreen]; Do you think it's possible ?
  18. Hi i just started with phaser and thought it would be cool to mix in some 3d overlays for certain elements. Is it possible to render uv mapped meshes using phaser? I tried to pass the gl context ( to a function that does some raw webgl operations, but it bails out with the message: "INVALID_OPERATION: uniform2f: location not for current program", which seems pixi related? ( Thanks! Karl
  19. Hi everybody, hope you will forgive and understand my bad english (from france here) I'm a very occasional coder. Most of the time I don't know what I'm doing but never stop until it works I am currently working on a project for a digital comics I am drawing. As the main purpose is to be able to set graphic scenes, panels, pages and so on, in a visual environnement, I choose to construct my digital comic in flash pro CC which is a very simple tool for building 2D scenes with animations and sound. Then, I use the flwebgl javascript tool made by Adobe for exporting flash scenes into webgl canvases (they also use createjs sound library) and then use the flwebgl API to add some interactivity in my html5 page. But both flwebgl and its API are very basic. Especially the renderer. I miss a lot of features included in Pixi. So my question is : is there a way to use Pixi as the final renderer on another webgl library like the one used in flash pro cc ? To be honest, I have no idea how their library works. My knowledge in coding is too limited, definitely. You can have a look on flwebgl here : (absolute chinese to me ) For those interested by using flash animation with webgl I recommand to give a try at OpenFl. It seems more complete than the adobe library but very more complex too. Too much for me, I must say ... And the assembling process is too complex for a simple project like mine. But maybe there is another way to exploit swf flash animations with Pixi ?
  20. I need to do an update on a container of sprites, so I use container.removeChildren() to clean it out first. Then I just add in the new sprites using container.addChild(). The container is inside another container. Sometimes when I render after doing this I get the following error... DisplayObject.prototype.updateTransform = function() { // create some matrix refs for easy access var pt = this.parent.worldTransform; //Uncaught TypeError: Cannot read property 'worldTransform' of null var wt = this.worldTransform;Uncaught TypeError: Cannot read property 'worldTransform' of null 24.DisplayObject.updateTransform @ pixi.js:7698 23.Container.updateTransform @ pixi.js:7198 23.Container.updateTransform @ pixi.js:7201 48.WebGLRenderer.render @ pixi.js:13790 Renderer.draw @ index.html:626 tick @ index.html:236 event @ d3.min.js:549 tick @ d3.min.js:6651 d3_timer_mark @ d3.min.js:2486 d3_timer_step @ d3.min.js:2466The this context is the sprite, it seems like maybe a deleted sprite is being rendered and because removeChildren sets the parent of the removed children to null this happens. It happens seldom when I have the dev tools open (I'm working in chrome) but it happens every time when the devtools are closed (and the thing is cycling much faster). Is it possible that the delete event emitted by removeChildren on delete is not propagating fast enough? Is this a known issue with removeChildren? Is there a better way to manage the process of updating a container of sprites with a dynamic population?I tried hacking around it by only removing the excess sprites and then doing this... circles.removeChildAt(i);circles.addChildAt(circle, i);but I still got the same error.
  21. fps is not regularly working in chrome. I expected fps should be 60 but seconds later fps drops from 60 to 40 then it works normally, again and again but fps works normally in firefox.
  22. Jonu

    2 Renderer

    Hey, in my current Projekt i need two canvas. One for displaying a mountinggraph and the other one for displaying a dynamic diagramm. Can i use two canvas doms and two renderer of pixi or do they interfere with each other ? Thanks in advance Grettings Jonu
  23. Hey, I have another question which might be easily answered by somebody who is very familiar with the pixi sources. I'm in the progress of writing some custom classes to render a particle system. The particel rendering is all fine and working. I made some pretty good progress so far. I have a small customized PIXI.Container with a PIXI.ObjectRenderer and custom shader (it's like a sprite is rendered through the SpriteRenderer). As I said, this really works rock solid at the moment, I have learned a lot from the existing Particle/Sprite Renderer and I'm really impressed how many great examples of coding can be found in the PIXI v3 sources ) NOW: After getting so far, I want more: Post processing of my render result. I thought this would be easy, just plug in some filters and you're done. But there seems to be a problem with my rendering order. Filteres are not applied at all, filters are not behaving like normal (change over time) interfering with sprites on the parent container or I get filters running only when I combine two of them. I tried to create a very minimal example- but it's still a lot of code. See this? That rectangle is blurring over time? Or this: A gray filter is applied but its still red Try to apply both filters to the stage: Nothing happens. Try to apply both filters to the stage: Nothing happens. Let's make a sprite added to the stage visible,now both filteres are triggered My assumption: My custom renderer (RenderTester in the demos) is not called at the right position so it's getting mixed up during rendering. I couldn't find any relevant container.children checks so I don't think this is a cause. I currently override PIXI.Container#_renderWebGL, I had version where I overwrote PIXI.Container#renderWebGL, called by my own the filter Manager with push & pop but I could never get my expected result which is: 1. Render whatever there is to render in my container with custom ObjectRenderer. 2. Then take the result to apply some post processing (blurring, thresholds, alpha blending, ..)Is my filter approach correct? Or should I create my own RenderTarget workflow even that the FilterManager is basically doing exactly what I want ( managing some RenderTargets to process on ) I compared my Container/ObjectRenderer combination with the existing Sprite/SpriteRenderer and could't findanything different that would prevent my container from applying a correct filter post processing. Any advice? Did I missed something really obvious? Thanks! var RenderTester = augment(PIXI.Container, function(uber){ this.constructor = function(texture){; this._texture = texture; } //does this prevent the filteres from getting applied? this._renderWebGL = function(renderer){ renderer.setObjectRenderer( renderer.plugins.tempRenderer ); renderer.plugins.tempRenderer.render( this ); } });
  24. This is my setup: var win_width = window.innerWidth;var win_height = window.innerHeight;var stage = new PIXI.Stage(0xFFFFFF);var renderer = new PIXI.WebGLRenderer( win_width, win_height, { transparent: true});document.body.insertBefore( renderer.view, document.body.firstChild );var game = requestAnimationFrame( updateGame );var rect = new PIXI.Graphics();rect.beginFill(0x336699);rect.drawRect(0, 0, 400, 400);stage.addChild( rect );function updateGame() { // My simple game logic renderer.render( stage ); game = requestAnimationFrame( updateGame );}And when I open in a browser I got this error message Uncaught TypeError: Cannot read property 'length' of nullTried to change it to autoDetectRenderer and still producing same error but, If I change the renderer to CanvasRenderer, everything work normally. What do I miss? Additional info: Using PIXI v2.2.8Tested in Google Chrome 41, OS X Yosemite
  25. I am using a PIXI.WebGLRenderer and calling its render method on my stage which renders everything that is a child of the stage. Does this method loose efficiency if the stage has children that are off screen? Should I be removing objects that have gone off the screen so the renderer doesnt try to draw them or is the renderer smart enough not to draw that object? I am making a game with a tiled map and I want to know if I should be removing the tiles from the stage when they have scrolled off screen and then add them back when we go back to that part of the map or does it not matter? thank you