JackParke

How to draw directly to a PIXI canvas?

Recommended Posts

I want to use PIXI only as the rendering/drawing part of a game (engine) but I also need the possibility to draw directly (for non-sprite graphics).

I am able to get access to the canvas a) renderer.render() overwrites what I do (even if clearBeforeRender is false) and 2) I guess there's a better way?

What is the correct way make my own renderer / plugin so I can draw directly to the canvas?

Something about... PIXI.CanvasRenderer#registerPlugin

Share this post


Link to post
Share on other sites

The main idea of PIXI is that you cant just render parts of image. However it has ways to cache things.

In case of webgl, this should help you, however it comes with performence losses.

var renderer = new WebGLRenderer(800, 600, { preserveDrawingBuffer: true} );
//same param is accepted in "new Application"

However I that calling render() for webgl multiple times can affect performance too. There are many optimizations in renderer plugins that will stop work if you try to use them not from pixi rendering pipeline.

There's of simple way to draw something - create separate canvas with 2d canvas, draw somethin there, then use "Texture.fromCanvas" and use it in sprite. However, beware of performance loss because that texture will be uploaded into GPU every frame if you update the canvas.

Anyway, I cant explain all the things, you have to describe your case, or just read the pixi code and learn how it works. It wont be easy, for example this is simple v4 renderer plugin: https://github.com/pixijs/pixi-plugin-example And for canvas, here it is main sprite rendering code: : https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/canvas/CanvasSpriteRenderer.js , https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/Sprite.js#L317 . 

Sorry, but there's no tutorials on how to make custom renderer plugin, except code examples from pixi and plugins itself. People who know how to do it learn after they already know all tricks with the stage level, you cant just omit learning Container,Transform,Sprite,Graphics,Mesh,RenderTextures before you get to underlying level :(

If you succeed, you should make a tutorial :) 

Share this post


Link to post
Share on other sites
On 9/20/2017 at 12:47 AM, JackParke said:

OK, thanks for the detailed info.

For now I managed now to draw directly to the canvas without the renderer clobbering it.

Hi Jack, I am trying to pen draw freehand on the pixi but couldn't achieve so far.

Would you please advise how you did it? 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.