plank-js
Small rendering library forA small library for rendering objects from the planck-js library It is written without using third-party libraries and renders If you want to use planck-js together with stage-js libraries, then in the stage-js branch you can find another version
Install
npm
npm install planck-renderer --save
yarn
yarn add planck-renderer
Example
; const canvas = documentconst ctx = canvas const world = ;const renderer = world ctx const runner = world // default settings speed: 1 fps: 60 // init world entitiesworld;world;world; runnerstart = renderer // start rendering world
A more detailed example can be found in the folder example
Renderer
import renderer
;
Where CanvasRenderer uses canvas for rendering, SVGRenderer - svg, default import Renderer automatically selects canvas
Renderer API
constructor
// default optionsconst options = scale: 16 strokeStyle: dynamic: 'black' static: 'black' kinematic: 'black' const renderer = world ctx options
renderer.draw
If you need to draw something on the canvas in addition to the physical objects of the engine, then you can do this in the renderer method. This method returns context
renderer { ctx}
custom figure drawing
const ball = world;ball;ballrender = stroke: 'tomato' // stroke style only for this body // or custom drawing function { // draw your circle }
custom render function
the first argument this function always returns context. For the circle, the next two arguments will be position (object - x, y) and size (number). For a polygon, the next two arguments will be position (object - x, y) and size (object - width, height)
Let's draw a ball texture instead of a circle
const renderer = world ctx const init = { const ball = world; ball; ballrender = stroke: 'tomato' { ctx return true // optional } renderer} const img = imgsrc = "https://pngriver.com/wp-content/uploads/2018/04/Download-Swimming-Pool-Ball-PNG-File.png"img { }
if the custom function returns true, then it draws the custom method and the built-in
Runner
import runner
;
Runner API
constructor
// default optionsconst options = fps: 60 speed: 1const runner = world options
start rendering world
runner.start(drawingFunction, updateFunction)
runnerstart { renderer } { console }
stop rendering world
runner
if you started the drawing and then stopped, then you can start the restart with the start command without arguments
runnerstart { renderer} // later...runner // later...runnerstart // this is equivalent to the previous run
custom runner
You are not required to use Runner to render the world. To use your own game loop, just call the renderer.renderWorld () method
(do not use this example in your projects, this is not correct)