Jump to content

Search the Community

Showing results for tags 'RenderTexture'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • 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





  1. Hi, I am trying to take a snapshot of the main container ( stage) of my application ,which I render on every frame ( customRenderer.render(stage)), and paste that snapshot on the topmost child container of the stage. The code looks like, const snapshot = this._customRenderer.generateTexture(this._stage) const sprite = new Sprite(snapshot ) this._stage.getChildByName("snapshotHolder").addChild(sprite) It takes snapshot alright, but if the stage is scaled down , the sprite even though of actual size of the stage ( lets say 1000x1000), the area covered of it by the snapshot i
  2. Hi, I don't like to bother, but I don't sure what I'm doing and I need some guidance if it's possible... I have two containers, one for map sprites (320x180px) and the other for UI graphics (who it's resized to native resolution, in my case 1920x1080) My intention is to rescale map_sprites_containter and all its sprites to 1920x1080 in the most efficient way, every frame. So I came up with the idea of render a texture of map_sprites_container, convert it to a sprite and scale it. Is this the best way? Some pseudo code: var bitmap = new Bitmap(320, 180); var renderTextu
  3. Hi, I need to create an image in run-time and then convert it to a base64 string. I can create the image with Phaser.GameObject.RenderTexture, but does anyone know how to convert it to a base64 string? Thanks a lot. Tomas
  4. Hello, The answers to my questions may seem evident, please consider I'm a complete beginner to HTML and JS Phaser coding. I am having two problems with my code. The first is that renderTexture doesn't seem to work. I am trying to make a trail of my player, like the "trail" example on labs.phaser.io. I actually copied the code needed, but it does not work. Here is the line causing the problem: rt = this.make.renderTexture({ x: 0, y: 0, width: 800, height: 800 }).setOrigin(0, 0); in the create function. And here is what the console says: Uncaught TypeError: this.make.
  5. Hey I am building quite huge tile map from hexagons. Basically for performance reasons I create single render texture and add a lot of sprites,and texts to it. It takes quite a lot of time to do so, but I get higher FPS and that texture is pretty much static. However there is another layer on top of this, which is dynamic, if I add another render texture to the game, FPS drops, so if I render everything to single texture FPS is still OK, however when dynamic part changes I need to rerendering whole texture and that takes too much time. So I was thinking to generate static texture and cac
  6. Hi, first post and very new to PIXI! I'm trying to figure out how positioning works and how to do it properly. I have a few followup questions which I'll take later. Goal: Having a centered "mask area" where I can count the "unmasking progress" But first off; here is a fiddle. As you can see I have a centerContainer which I add all my sprites and bind all interactivity to. I center all the sprites relative to the app width and height values. I create the renderTexture with the same width and height as onTopOfMask and imageToReveal (400x400). The renderTextureSprite is not pos
  7. Hi! I'm using pixi 4.5.3 and can't find a way to clear out an rectangle from my transparent render texture. Seems that all blend modes have gl.ONE_MINUS_SRC_ALPHA in them Is there any hack around this? I have a large renderTexture with mostly static bitmap text and I want to update only parts that have changed for better performance. Is there any other way to update only part of an rendertexture while retaining transparency? Thanks!
  8. I have this simple jsfiddle that displays the problem that I'm trying to solve. https://jsfiddle.net/4ke8k7hu/2/ It looks like the render texture get's cropped based on the position of the object passed to the renderTexture.render function. Is there a way around this?
  9. Hi, I'm trying to work out how to create a shape with graphics, cache it and add it to a sprite to use repeatedly I was trying to recreate the intro background on this video (see below, not the video thumbnail but the first thing you see when you actually play it). I realised drawing all the star graphics and fills directly over time would probably be too slow, so it would be better to cache the star & it's trail as a bitmap and then create multiple sprites from that. I want to create the graphic early on and pull it out of the cache later. I'm getting an error though. The key is the
  10. Apologies if this has either been asked before, or I'm misunderstanding how to use RenderTextures I have a renderTexture that's outputting the contents of a Phaser.Image(), which in turn contains an instance of Phaser.BitmapData(). In my update() loop, I want to update the position of some geometry drawn in the BitMapData, but those changes are never seen in the RenderTexture. What would be the reason for this? Like I said I could be misunderstanding how & why you might want to use a RenderTexture, but this portion of my code will be quite expensive & updated regularly -
  11. I'm cutting up some large images into puzzle pieces, and I'd like to create spritesheets out of them directly from JavasScript (as opposed to cutting them up and saving them as images which are then loaded as a spritesheet). So far I've made a puzzle cutter in regular canvas. I did these operations in canvas instead of pixi because they are pretty easy in canvas. I can then draw all of these puzzle pieces to a new canvas, and via PIXI.RenderTexture I can begin to create a spritesheet. Ideally I'd like to gain access to a syntax like new PIXI.Sprite.fromFrame(puzzleId + '-' + puzzlePieceIn
  12. Hello! I have an issue that I didn't understand too much. I'm trying to build a tiled-isometric-map loader for Phaser, where I have many issues about perfomance. So I will investigate different techniques to make them more lightweight for CPU/GPU trying to use some techniques like render the map layers in cropped RenderTextures (just draw the visible area of the map at once), using sprite-populated SpriteBatches/Groups as source (I tested with both). In simple words, the logical behind this is the following: Populate the SpriteBatch/Group with tile-based sprites from a cache
  13. Hi there, im develong a game with ink. They are some planets and you shoot ink on them and then you conquer them. I use a temporal bitmapdata do draw render texture planets on it to use bitmapdata getpixel method to get if the planet is completely of a color (or almost). Im wondering if theres a better method because this is so laggy. Theres a way to get a pixel from renderTexture? conquer: function(p) { //I draw planet renderTexture on bmd bitmapdata to allow the getpixel function bmd.draw(p.capaPintura,0,0,(p.radio*2),(p.radio*2)); //Points of the p
  14. Hi people, I'm porting something from flash where I have a drawn map with roads, and I want to be able to select each road individually with the mouse. now in Flash I could simply use the hittest on the shapes of the roads, but in PIXI I can't. My solution was to draw all the roads, each with an unique RGB color, and do a get pixel on your mousecoords to see which road you've selected. Now my problem is, how do i get pixeldata from my sprite when I'm using a webgl renderer ? What I've come up with so far is creating a separate canvasrenderer and a separate stage to render my map to, an
  15. Yo! I've started developing a game and I've been learning a hell of a lot about WebGL for lighting and shadows, and I'm hoping to implement some sort of lighting pipeline, following a technique like this: http://ahamnett.blogspot.co.uk/2013/05/2d-shadows-shader.html This means I'll need to process textures in a fragment shader, and then process scene using the resulting bitmap in another shader. Just to test, I tried rendering a part of a game world to a render texture. This worked fine without any shaders (Phaser/PIXI filters) applied. The render texture is displ
  16. HI, I am enthralled by the pixi render texture tutorial, but I'm getting an error from the update() function: I've changed the variable names, but I've triple checked that they are consistent. Here's some of my create() code to give an idea what I'm doing. I was hoping to use the render-texture tutorial on top of my working code. Is there a way to get the renderTexture working within an existing p2 game? Thank you. //game.stage.backgroundColor = "#f2f2f2"; game.world.setBounds(0, 0, 450, 800); game.physics.startSystem(Phaser.Physics.P2JS); // create two render textures
  17. Hello, I've been playing around with what is on pixi.js dev-4.0.0 branch and have found everything to be working except RenderTexture and BaseRenderTexture. I just want to ask if these are still in development... or if I'm possibly using them wrong? RenderTexture.create = function(width, height, scaleMode, resolution) Overall awesome work on pixi-4 so far! We're ready to upgrade our game to v4
  18. We recently moved to Pixi.js v3 and we discovered that all the render textures were being rendered without anti-aliasing. All other Sprites and BitmapText object were just fine, and did look like they still had anti-aliasing. Has Pixi v3 explicitly disabled anti-aliasing for RenderTextures? Or is this a bug? See My JSFiddle Test Case Note: the Red Text is the RenderTexture.
  19. I try to render a container over a renderable texture, but the container transformations simply do not apply on the sprites inside. You can see it happens by taking the following code: var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb}); document.body.appendChild(renderer.view); // create the root of the scene graph var stage = new PIXI.Container(); // create a new Sprite using the texture var texture = PIXI.Texture.fromImage('_assets/basics/bunny.png'); var bunny = new PIXI.Sprite(texture); // move the sprite to the center of the screen bunny.position.x = 200;
  20. Hi! I have been trying to get a second camera into my scene, so that this cameras view will overlay my main cameras view but just in the bottom left corner. Think if i wanted to create a mini-map, but to achieve this all i was doing was putting a camera way above the land looking down. Maybe best way to explain is please look at my example. http://www.babylonjs-playground.com/#1QXZAA#1 This is what i am trying to achieve. A second camera is looking at the same object but from a different angle. However, when you move the main camera with the mouse so that the objects in it
  21. In one state I'm using Phaser.RenderTexture, game.make.bitmapData and they reduce framerate in the next state. Is there a way to get rid of them completely? 1) I'm switching the state. 2) Using .destroy() for bitmapData, RenderTexture and sprite which uses RenderTexture. What else can be done? Remove them from cache? Thanks in advance. P.S. using CANVAS mode
  22. I'm struggling how to manipulate renderTexture while blitting. As of now, I have a burnout in a tilesheet, and the burnout animates when the arrow keys are pressed. My logic is to create a renderTexture of the burnout, have the renderTexture leave a copy of the burnout sprite behind the original burnout. This would mimic a car burnout. The problem I'm having is that the renderTexture sprite is moving with the original burnout and not staying behind. I have a burnout circle running around the screen instead of staying stuck on the stage where it was burnt out. My problem is trying to figure
  23. Can I make a Rendertexture from a PIXI.Container with several PIXI.Container's in it? So, a texture from a Container of Containers? I'm trying it, but I cant get any results to show up. I've got islandStage.addChild(cloudsBack);islandStage.addChild(map1);islandStage.addChild(container);islandStage.addChild(guest_island);islandStage.addChild(cloudsFront);stage.addChild(islandStage);In my animation loop I have islandShape = new PIXI.RenderTexture(islandStage, islandStage.width, islandStage.height);cloudShadowSprite.texture = islandShape;But when I throw cloudShadowSprite to the outer contai
  24. Hi, I have 2 render textures swapping to create a trail, a bit similar to this concept http://phaser.io/examples/v2/display/pixi-render-texture does anybody know why my trail never fades out.. I guess it's because the value never actually reaches 0? you can see there is grey residue of the sprite everywhere http://phaser.io/sandbox/VWOOYqpU/play I've adjusted the second image in photoshop to show the trails as they're not always easy to see on a monitor, but that can depend on the colour used thanks J
  25. Hi, As per my example here http://www.html5gamedevs.com/topic/17484-caching-graphics-to-rendertexture-or-bitmapdata-and-adding-to-cache/ , I'm trying to draw multiple sprites to a render texture to animate a background. I need to be able to scale and rotate the Sprite image but nothing else (possibly Sprite has overheads I don't need?) I currently use 26 Sprites in a group and RenderXY the group to a texture in my update I could use filled polygons and track the points over time and redraw but I assume Graphics is slower My PNG for the Sprite is 128x512 and I scale them from 0.1 to 1.7. In c
  • Create New...