Skip to content

Instantly share code, notes, and snippets.

@Beeblerox
Last active October 1, 2017 17:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Beeblerox/f6ac96e4ce57247f56d78ba80da0c5ff to your computer and use it in GitHub Desktop.
Save Beeblerox/f6ac96e4ce57247f56d78ba80da0c5ff to your computer and use it in GitHub Desktop.
Render to texture and to the camera
package;
import flash.Lib;
import flixel.FlxG;
import flixel.FlxSprite;
import flixel.FlxState;
import flixel.FlxStrip;
import flixel.effects.FlxRenderTarget;
import flixel.group.FlxGroup;
import flixel.system.FlxAssets.FlxShader;
import flixel.ui.FlxBar;
import flixel.ui.FlxButton;
import flixel.util.FlxColor;
import openfl.Vector;
/**
* ...
* @author Zaphod
*/
class RenderTargetState extends FlxState
{
var renderTexture:FlxRenderTarget;
var s2:FlxSprite;
override public function create():Void
{
// just some test sprites
var s1:FlxSprite = new FlxSprite();
s2 = new FlxSprite(200, 0);
s1.alpha = 0.5;
s2.shader = new Invert2();
// we need to add our sprites to state, so they will start rendering and updating.
// (TODO: maybe add them to render textures instead, so render textures will be flxgroups instead of flxsprite??? probably i will change this)
add(s1);
add(s2);
// create render target with the size of 256 by 512 pixels
renderTexture = new FlxRenderTarget(256, 512);
// you can set clear color for render target (if you want it to have some color background)
// but it's optional (default color is FlxColor.TRANSPARENT).
// And you can even not clear render texture before each rendering, by setting `renderTexture.clearBeforeRender = false;`
// or you can set some semitransparent clear color, so previous drawn states will be fading away.
renderTexture.clearColor = FlxColor.RED;
// specify camera which will be used for calculation of drawable sprites positions on this render texture.
// basically this property will override `cameras` property for all sprites added to this render target.
renderTexture.renderCamera = FlxG.camera;
add(renderTexture);
// set object's renderTarget, so it will be rendered ONLY on this texture and WON'T APPEAR on any other camera.
// if you want object to be rendered on some camera also, then you will have to override its `draw()` method.
// (Tell me if you want such functionality built in flixel core).
renderTexture.add(s1);
// because render target is a sprite, you can set its position, alpha, rotation, scale, etc...
// (try to play with it)...
renderTexture.y = 100;
// set render pass shader (it's optional, but what's the point of this then???).
// (it could be cheaper to draw all sprites on texture and then apply shader effect on them,
// than to render each of the sprites with shader).
renderTexture.shader = new Invert2();
// you can render one render target to another
// 1. let's create another render target
var renderTexture2:FlxRenderTarget = new FlxRenderTarget(512, 256);
// 2. specify camera which will be used for calculation of drawable sprites positions on this render texture.
// (TODO: add ability to set renderCamera in constructor).
renderTexture2.renderCamera = FlxG.camera;
add(renderTexture2);
// 3. set this render texture as render target for our first render target.
// renderTexture.renderTarget = renderTexture2; // uncomment this line to see clipping effect.
var btn = new FlxButton(0, 50, "Test");
add(btn);
var bar = new FlxBar(0, 100);
bar.percent = 66;
add(bar);
// say you want some sprite to be rendered both on render texture and camera at the same time
// you can do this in following way
var strip:FlxStrip = new FlxStrip(100, 0);
strip.vertices = Vector.ofArray([0.0, 0.0, 100.0, 0.0, 0.0, 100.0]);
strip.indices = Vector.ofArray([0, 1, 2]);
// this will make strip render to texture
renderTexture.add(strip);
// to make it render to camera we'll need to add some inactive group and add this group to state
// if we'll add sprite to active group or directly to state then sprite will be updated twice
var dummyGroup = new FlxGroup();
dummyGroup.active = false;
dummyGroup.add(strip);
add(dummyGroup);
}
override public function update(elapsed:Float):Void
{
super.update(elapsed);
renderTexture.x = 0.5 * FlxG.width + Math.sin(Lib.getTimer() / 1000) * FlxG.width * 0.25;
}
override public function draw():Void
{
renderTexture.drawObject(s2); // render s2 sprite on render texture first
// then draw everything else (and s2 sprite on the camera)
super.draw();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment