Draw a Circle Pixi Js
Creating primitives
Primitives are basic geometric shapes that nosotros can draw direct using instructions. In Pixi.js the instructions used to create these graphics are very similar (only non the aforementioned) to the ones used to draw an HTML Canvas element using pure Javascript.
Setting up the stage
The showtime matter will be to create a PIXI application as in the previous section, merely with some minor changes:
// the size of the phase, equally variables let stageWidth = 480 ; let stageHeight = 240 ; // create app permit app = new PIXI . Application ({ width : stageWidth , top : stageHeight , antialias : true , backgroundColor : 0xEEEEEE }); // add together canvas to HTML document document . body . appendChild ( app . view ); The only changes are the addition of one more parameter in the Aplication function, chosen antialias, which improves the display of the edges for elements on the screen.
Also now the width and height of the stage are declared as variables, so that these values can be reused in dissimilar parts of our lawmaking.
A first circle
To create a graphic called myCircle nosotros use the Graphics constructor, which allows y'all to describe lines, circles, rectangles, polygons, among other shapes. Thus we obtain an object in which we can draw in improver to manipulating freely, irresolute its properties.
// draw a circle let myCircle = new PIXI . Graphics (); To make our circle nosotros use a sequence of 5 instructions:
myCircle . lineStyle ( 2 , 0x993333 ); myCircle . beginFill ( 0xCC3333 ); // params: pos x, pos y, radius myCircle . drawCircle ( 100 , 100 , 25 ); myCircle . endFill (); And each of those lines have a task:
-
lineStyleready the style of the line: thickness ii pixels and border colour0x993333 -
beginFillfills the geometric shape, with the color0xCC3333 -
drawCircledraws the circumvolve itself, entering thexandycoordinates where the centre of the circumvolve volition be located, followed by the desired radius, in pixels. -
endFillends the filling process
Those are all the steps required to draw our circle. However, the drawing process has been holded out inside myCircle, which is a variable. That is to say, all the time we accept been drawing in the memory of the calculator. Information technology takes ane more step to encounter our circumvolve on the screen.
Adding items to the stage
The final step is to call the addChild office of the application stage, which volition make the myCircle chemical element visible on screen:
app . phase . addChild ( myRect ); Thus, the complete code needed to draw a circle and display it on the screen is equally follows:
let myCircle = new PIXI . Graphics (); myCircle . lineStyle ( 2 , 0x993333 ); myCircle . beginFill ( 0xCC3333 ); myCircle . drawCircle ( 240 , 120 , xl ); myCircle . endFill (); app . stage . addChild ( myCircle ); The event is a circle with a radius of 40 pixels and located in the center of the stage:
Notation that the coordinates of the object myCircle will be (0, 0) and the circle drawn inside that object has an offset to the coordinates (240, 120). This could exist disruptive in some cases and for that reason we will explore this topic further in a futurity post.
How about a rectangle?
Following a like procedure, we can create and insert a yellow rectangle, but this time at the phase origin (0, 0), that is, the upper left corner:
let myRect = new PIXI . Graphics (); myRect . lineStyle ( four , 0xEEBB00 ); myRect . drawRect ( 0 , 0 , 48 , 48 ); // x, y, width, height app . stage . addChild ( myRect ); 
Irresolute visual properties
The thickness of the edge can affect the verbal size and position of an particular. It can be seen that, despite having been created at the point (0, 0), part of the border is outside the visible space. This is due to the manner the instructions draw the edges of the figures. This beliefs, of course, is configurable and we tin modify it after.
After adding the graphic on the stage, nosotros will manipulate the backdrop of the rectangle, taking it to the center of the stage and changing its original dimensions so that it at present measures twice, that is 96 pixels on each side:
myRect . width = 96 ; myRect . height = 96 ; myRect . x = ( stageWidth - myRect . width ) / ii ; myRect . y = ( stageHeight - myRect . peak ) / 2 ; And so we obtain the post-obit result:
Creating text
The fastest way to create text is similar:
allow myText = new PIXI . Text ( ' Morn Coffee! ' ) app . stage . addChild ( tagline ); However, this text volition take a default style (font, color, weight, etc.). To improve the appearance of our text, it is necessary to create a text way object, that allows u.s.a. to control each characteristic:
let textStyle = new PIXI . TextStyle ({ fill : ' #DD3366 ' , fontFamily : ' Open up Sans ' , fontWeight : 300 , fontSize : 14 }); Assigning the manner to our text element, we will display a much more personalized bulletin on the screen. We will place it in the eye of the stage and will assign the anchor property, which allows us to command the element'due south anchor point:
let myText = new PIXI . Text ( ' Morn Coffee! ' , textStyle ) // <- myText . anchor . set ( 0.5 ); myText . x = 240 ; myText . y = 120 ; app . stage . addChild ( myText ); From what we get:
Here is a live version where all the bones elements are put together:
Calculation Sprites
Sprites are 2D visual elements that can be inserted into the stage of any graphic environment of interactive applications or video games. They are the simplest graphic resources that we can put on screen and control from the code of our awarding, by manipulating backdrop such as its size, rotation or position, among others.
Sprites are generally created from bitmaps. The easiest way, although not necessarily the best in all cases, is to create it directly from an image file:
permit coffee = new PIXI . Sprite . from ( ' images/coffee-cup.png ' ); app . stage . addChild ( coffee ); After which nosotros would meet the post-obit:
Although this method is elementary, information technology is inconvenient if the image file is as well big, since loading will take longer than expected and the following instructions related to the sprite could produce unexpected behaviors.
Creating Sprites by pre-loading textures
The best mode to load one or more external resource is by using the Loader class offered by Pixi.js. For our convenience, the PIXI object offers a pre-built loader instance that tin can be used without further configuration.
const loader = PIXI . Loader . shared ; After the instantiation of this utility, we can load the same file but with the new method:
let myCoffee ; // it will shop the sprite loader . add ( ' coffee ' , ' images/java-cup.png ' ) . load (( loader , resources ) => { // this callback function is optional // it is chosen in one case all resource have loaded. // like to onComplete, but triggered subsequently console . log ( ' All elements loaded! ' ); }) . use (( resources , next ) => { // middleware to process each resource console . log ( ' resource ' + resource . name + ' loaded ' ); myCoffee = new PIXI . Sprite ( resource . texture ); app . phase . addChild ( myCoffee ); next (); // <- mandatory }) In the previous code nosotros use the add together part to add elements to the loading queue, with a name that nosotros want to assign to information technology (in this instance coffee), in add-on to the path to the paradigm file.
We can chain the load and use functions to do tasks with the loaded elements. The offset is executed when the loading of all the elements has been completed. The 2nd works equally a middleware after each particular has been loaded.
The power of the Loader class shines when nosotros want to load multiple files at the same fourth dimension. For convenience, we will utilize the object sprites to store the loaded elements, instead of having a variable for each i of them.
permit sprites = {}; let xpos = 16 ; loader . add ( ' java ' , ' images/coffee-cup.png ' ) . add ( ' muffin ' , ' images/muffin.png ' ) . add ( ' icecream ' , ' images/ice-cream.png ' ) . add ( ' croissant ' , ' images/lollipop.png ' ) . use (( resources , side by side ) => { // create new sprite from loaded resources sprites [ resources . name ] = new PIXI . Sprite ( resources . texture ); // set in a different position sprites [ resource . proper noun ]. y = 16 ; sprites [ resource . proper noun ]. x = xpos ; // add the sprite to the stage app . stage . addChild ( sprites [ resource . proper noun ]); // increase the position for the side by side sprite xpos += 72 ; next (); // <- mandatory }) Remember that use runs multiple times, once for each particular added to the load queue (and later on loaded). This volition outcome in the following:
In addition, the loader case sends various signals during the loading process, which we tin can take advantage of to obtain additional data well-nigh the loading process. The post-obit code would display letters on the panel:
loader . onProgress . add (( loader , resource ) => { // called once for each file console . log ( ' progress: ' + loader . progress + ' % ' ); }); loader . onError . add (( message , loader , resource ) => { // called once for each file, if mistake console . log ( ' Mistake: ' + resource . name + ' ' + message ); }); loader . onLoad . add (( loader , resource ) => { // called in one case per loaded file console . log ( resource . proper noun + ' loaded ' ); }); loader . onComplete . add (( loader , resource ) => { // called once all queued resources has been loaded // triggered before load method callback console . log ( ' loading complete! ' ); }); Cheque out a live version here:
Source: https://dev.to/ggojedap/basic-elements-with-pixi-js-primitives-text-and-sprites-1f67
0 Response to "Draw a Circle Pixi Js"
Enregistrer un commentaire