Jump to content

Multiple visual sub-outputs?


Recommended Posts

Hi, I have a strange doubt. It's experimental anyways, so it doesn't matter too much if there's no a reasonable solution for this.

Let me explain this in a simple way: I'm trying to make Phaser interact with other image-processing libraries, in the way that can "feed" multiple visual outputs. Here's a little example of what I'm trying to explain:

  • The main output, that everybody knowns, who phaser initializes at the init and put's in the DOM. And of course, renders things xD. Give it a example size: 640x480.
  • Another output that renders other things in a 320x240 canvas, to send frame data somewhere...
  • And another 160x120 output that render another thing in a canvas to send to some image processing library that generates another output.


To try to make that I came with the idea to use BitmapData to render the necessary stuff into it and take the canvas context. The results? Slow perfomance. Okay, so after that I switched to RenderTexture that is a lot much faster to render things, but yes: You need to handle with matrix transformation to do basic effects like transformations, any-anchor rotation, etc... And well... I concluded that I'm re-invent the wheel trying to implement basic features that there's already in Phaser, but that's not avaiable for the restrictions that BitmapData/RenderTexture has. Doing some FX to a sprite that takes 3-4 lines in normal-output Phaser, takes 30+ lines trying to render them in a one of those "alternative outputs".

So I came with the idea... Practically I need a "Phaser that renders in another stuff that's not the main output". Something similar like this. At simple researching I saw there's no a direct way to do this (maybe I'm wrong?). Also, I looked for a possibility to run multiple instances of Phaser in a once, but that's really convenient in pefomance-cost talking? Maybe one-instance can handle all of this and I'm not noticed?

Yes, it's kinda specific. Maybe the solution still relies in BitmapData's/RenderTextures, but I'm curious about this. 

Thanks in advance :) 


PD: The motivation of this is for try to "build" a mid-complex scene in Phaser that it renders in a "sub-output" in a Canvas to pass it to ThreeJS to put it in a Shape and renders it back to Phaser main output. Maybe there's more straighfoward manners to do that.

Link to comment
Share on other sites

Why not just take the main canvas that Phaser renders to, and then render to your smaller canvases directly from that? CanvasContext.drawImage will happily take a Canvas as its source input, so it'd only be one call per sub-canvas, as as it'd already exist in memory this has to be the fastest way. The downside is the canvas needs to be a 2d context and not WebGL, but if you're just using it as a texture in a 3D scene anyway that won't matter.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...