Jump to content

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

Link to comment
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 :) 

Link to comment
Share on other sites

  • 1 year later...
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? 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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