(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{74:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return c})),a.d(t,"metadata",(function(){return b})),a.d(t,"rightToc",(function(){return p})),a.d(t,"default",(function(){return m}));var i=a(2),n=a(6),r=(a(0),a(131)),l=a(132),s=a(133),o=a.n(s),c={title:"PixiJS Introduction"},b={unversionedId:"tutorials/pixi_intro",id:"tutorials/pixi_intro",isDocsHomePage:!1,title:"PixiJS Introduction",description:"PixiJS",source:"@site/docs\\tutorials\\pixi_intro.md",slug:"/tutorials/pixi_intro",permalink:"/docs/tutorials/pixi_intro",version:"current",sidebar:"docs",previous:{title:"TypeScript",permalink:"/docs/cheatsheets/typescript"},next:{title:"PixiJS Positioning",permalink:"/docs/tutorials/pixi_positions"}},p=[{value:"PixiJS",id:"pixijs",children:[{value:"Links",id:"links",children:[]}]},{value:"Architecture",id:"architecture",children:[{value:"Namespaces",id:"namespaces",children:[]},{value:"Classes",id:"classes",children:[]},{value:"Display Entities",id:"display-entities",children:[]},{value:"DisplayObject",id:"displayobject",children:[]}]},{value:"Interesting Plugins",id:"interesting-plugins",children:[]},{value:"DevTools",id:"devtools",children:[]},{value:"Basic setup",id:"basic-setup",children:[{value:"Other attributes",id:"other-attributes",children:[]},{value:"Update loop",id:"update-loop",children:[]},{value:"Loading",id:"loading",children:[]},{value:"Positioning",id:"positioning",children:[]}]},{value:"Exercises",id:"exercises",children:[{value:"Primitive shapes",id:"primitive-shapes",children:[]},{value:"Text",id:"text",children:[]},{value:"Particles",id:"particles",children:[]},{value:"Sound",id:"sound",children:[]}]}],u={rightToc:p};function m(e){var t=e.components,a=Object(n.a)(e,["components"]);return Object(r.b)("wrapper",Object(i.a)({},u,a,{components:t,mdxType:"MDXLayout"}),Object(r.b)("h2",{id:"pixijs"},"PixiJS"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"HTML5 Creation Engine"),Object(r.b)("li",{parentName:"ul"},"Lightweight 2D JavaScript library"),Object(r.b)("li",{parentName:"ul"},"Supports both Canvas API and WebGL (since version 5 it's only WebGL)"),Object(r.b)("li",{parentName:"ul"},"Full scene graph, sprite sheets, filters, shaders"),Object(r.b)("li",{parentName:"ul"},"Similar to PhaserJS game engine (yet it's way faster)"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"Ideal for simple games and rapid prototyping"))),Object(r.b)("h3",{id:"links"},"Links"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://www.pixijs.com/"}),"main page")),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://github.com/pixijs/pixi.js"}),"github")),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://pixijs.download/dev/docs/index.html"}),"documentation")),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://pixijs.io/examples/#/demos-basic/container.js"}),"examples"))),Object(r.b)("h2",{id:"architecture"},"Architecture"),Object(r.b)("h3",{id:"namespaces"},"Namespaces"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"this is just a subset, there are over 500 classes")),Object(r.b)("div",{className:o.a.figure},Object(r.b)("img",{src:Object(l.a)("img/docs/tutorials/02-pixi/diag_pixi_packages.svg")})),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"systems")," - individual components of the rendering pipeline"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"resources")," - resources used by BaseTexture to handle different media types"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"interaction")," - handling of input events (keyboard, mouse, touch)"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"prepare")," - asynchronous preparation of the rendering pipeline"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"extract")," - rendering-specific functions for exporting content"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"settings")," - customizable globals (default resolution, framerate,...)"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"utils")," - generalized utilities"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"filters")," - WebGL-only display filters")),Object(r.b)("h3",{id:"classes"},"Classes"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"Application")," - PIXI entry class, should be extended"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"Runner")," - alternative to signals, good for dispatching messages to many objects every frame"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"State")," - WebGL state"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"Transform")," - Transformation entity"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"Ticker")," - Update loop"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"Loader")," - resource loader"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"Shader")," - helper class for GPU shaders"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"Spritesheet")," - utility class for maintaining reference to a collection of textures")),Object(r.b)("h3",{id:"display-entities"},"Display Entities"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"EventEmitter")," - high-performance event emitter, similar to the default NodeJS emitter"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"DisplayObject")," - base class of all renderable objects"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"Container")," - a collection of displayable objects"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"Mesh")," - base mesh for rendering any WebGL visuals"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"Sprite")," - base class of all textured objects"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"Graphics")," - class for drawing primitive shapes (lines, circles, rectangles)"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"ParticleContainer")," - very fast version of the Container for drawing lots of sprites"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"BitmapText")," - very fast bitmap text renderer (textures are preloaded)"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"Renderer")," - class that draw the scene onto a WebGL canvas"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"BaseTexture")," - wrapper for texture images"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"BaseRenderTexture")," - special texture that allows any object to be rendered to it"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"CubeTexture")," - image/canvas/video/svg texture"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"Texture")," - BaseTexture with metadata"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"RenderTexture")," - RenderTexture with metadata")),Object(r.b)("div",{className:o.a.figure},Object(r.b)("img",{src:Object(l.a)("img/docs/tutorials/02-pixi/diag_pixi_classes.svg")})),Object(r.b)("h3",{id:"displayobject"},"DisplayObject"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"members"),Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"alpha, angle, buttonMode, cursor, filters, hitArea, interactive, localTransform, name, parent, pivot, position, renderable, rotation, scale, skew, transform, visible, worldAlpha, worldTransform, worldVisible, x,y, zIndex"))),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"methods"),Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"destroy, getBounds, getGlobalPosition, getLocalBounds, render, setParent, setTransform, toGlobal, toLocal, updateTransform"))),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"events"),Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"added, click, mousedown, mousemove, mouseout, mouseover, mouseup, removed, tap, touchcancel, touchend, touchmove, touchstart")))),Object(r.b)("h2",{id:"interesting-plugins"},"Interesting Plugins"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://github.com/pixijs/pixi-filters"}),"pixi-filters")," - collection of custom display filters"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://github.com/pixijs/pixi-compressed-textures"}),"pixi-compressed-textures")," - compressed textures for retina displays"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://github.com/pixijs/pixi-ui"}),"pixi-ui")," - simple user interface (still WIP)"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://github.com/pixijs/pixi-particles"}),"pixi-particles")," - advanced particle system with an editor"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://github.com/pixijs/pixi-sound"}),"pixi-sound")," - WebAudio API playback library"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://github.com/davidfig/pixi-viewport"}),"pixi-viewport")," - highly configurable camera viewport"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://github.com/theGolyo/PixiTweener"}),"PixiTweener")," - simple tweener for animations"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://github.com/kreezii/pixi5-dragonbones"}),"pixi5-dragonbones")," - plugin for dragonbone animations"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://github.com/eXponenta/pixi5-svg"}),"pixi5-svg")," - svg support"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://github.com/blastrain/pixi-after-effects"}),"pixi-after-effects")," - support for After-Effects animations"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://github.com/bfanger/pixi-inspector"}),"pixi-inspector")," - Chrome DevTools for inspecting scene"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://github.com/cixzhang/SpritesheetGenerator"}),"SpritesheetGenerator")," - spritesheet generator")),Object(r.b)("h2",{id:"devtools"},"DevTools"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"you can use ",Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://chrome.google.com/webstore/detail/pixijs-devtools/aamddddknhcagpehecnhphigffljadon"}),"PixiJS devtools")," to debug and modify your PIXIJs scene")),Object(r.b)("div",{className:o.a.figure},Object(r.b)("img",{src:Object(l.a)("img/docs/tutorials/02-pixi/chrome_plugin.jpg")})),Object(r.b)("h2",{id:"basic-setup"},"Basic setup"),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{className:"language-typescript"}),'import * as PIXI from "pixi.js";\n \nexport default class MyPixiApp extends PIXI.Application {\n \n  constructor(view: HTMLCanvasElement) {\n    super({ view });\n \n    this.ticker.add(deltaTime => this.update(deltaTime));\n  }\n \n  update(deltaTime: number) {\n    // game loop\n  }\n}\n')),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"it's recommended to create a new class and extend ",Object(r.b)("inlineCode",{parentName:"li"},"PIXI.Application")),Object(r.b)("li",{parentName:"ul"},"the only mandatory parameter is the ",Object(r.b)("inlineCode",{parentName:"li"},"view")," entity, which should be a HTML canvas")),Object(r.b)("h3",{id:"other-attributes"},"Other attributes"),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{className:"language-typescript"}),"  autoStart: boolean, // automatically starts the game loop\n  width: number, // width of the canvas element (in px)\n  height: number, // height of the canvas element (in px)\n  view: HTMLCanvasElement, // link to the canvas\n  transparent: boolean, // if true, the canvas will be transparent\n  autoDensity: boolean, // whether CSS dimensions should be resized to screen dim.\n  antialias: boolean, // sets anti-aliasing\n  preserveDrawingBuffer: boolean, // if true, preserves stencil buffer \n  resolution: number, // global scale of the screen (default is 1)\n  forceCanvas: boolean, // prevents selection of WebGL\n  backgroundColor: number, // background color of the canvas\n  clearBeforeRender: boolean, // if true, clears the canvas before next render cycle\n  forceFXAA: boolean, // forces FXAA anti-aliasing\n  powerPreference: string, // WebGL parameter for devices with more than one GPU\n  sharedTicker: boolean, // if true, uses global ticker for updates\n  sharedLoader: boolean, // if true, uses global loader\n  resizeTo: Window | HTMLElement, // resizes to a custom HTML element\n")),Object(r.b)("h3",{id:"update-loop"},"Update loop"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"option 1: by using PIXI internal ticker")),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{className:"language-typescript"}),"let ticker = this.ticker;\n// prevents autostart\nticker.autoStart = false;\n// stops the ticker\nticker.stop();\n// starts the ticker if autoStart is false\nticker.start();\n// here we can register our update method\nticker.add(delta => this.ourUpdateMethod(delta));\n")),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"option 2: by using animation frame of the JavaScript engine")),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{className:"language-typescript"}),"ticker.autoStart = false;\nticker.stop();\nlet myUpdateLoop =(time) => {\n    ticker.update(time);\n    this.renderer.render(this.stage);\n    requestAnimationFrame(myUpdateLoop);\n}\nmyUpdateLoop(performance.now());\n")),Object(r.b)("h3",{id:"loading"},"Loading"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"Loader is responsible for asynchronous loading of assets (fonts, images, sounds, spritesheets)")),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{className:"language-typescript"}),"let loader = this.loader;\n// Chainable `add` to enqueue a resource\nloader.add('mySprite', 'data/sprite.png') // first parameter is an alias\n      .add('spritesheet', 'assets/spritesheet.json')\n      .add('bitmapFont', 'assets/score.fnt');\n \n// loading is asynchronous !!\nloader.load((loader, resources) => {\n  // init the rest of the game and run the ticker\n});\n \n// loader events\nloader.onProgress.add(() => {}); // called once per loaded/errored file\nloader.onError.add(() => {}); // called once per errored file\nloader.onLoad.add(() => {}); // called once per loaded file\nloader.onComplete.add(() => {}); // called once when the queued resources all load\n")),Object(r.b)("h3",{id:"positioning"},"Positioning"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"position, rotation, scale, zIndex"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"rotation")," - rotation in radians"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"pivot")," - origin of the object in px (rotation is always around the origin"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"anchor")," - relative origin of the object (only for Sprites"),Object(r.b)("li",{parentName:"ul"},"the scale of the parent affects the units of its children (common behavior of all gfx libraries)"),Object(r.b)("li",{parentName:"ul"},"pivot is not affected by the scale, it always takes into account the size of the object in px"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"stage")," is the root element of the scene graph"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"getBounds()")," - retrieves the bounds of the object, can be used to check where the object is"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"toGlobal()")," - calculates the global position"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"toLocal()")," - calculates the local position relative to another point")),Object(r.b)("h2",{id:"exercises"},"Exercises"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"all exercises are relevant to a project version with a tag of 4.2"))),Object(r.b)("h3",{id:"primitive-shapes"},"Primitive shapes"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"go to ",Object(r.b)("inlineCode",{parentName:"li"},"examples/src/02-pixi-intro/primitives.ts")),Object(r.b)("li",{parentName:"ul"},"follow the instructions in the TODO block and draw the picture below"),Object(r.b)("li",{parentName:"ul"},"you can access the canvas in ",Object(r.b)("inlineCode",{parentName:"li"},"http://localhost:1234/02_primitives.html"))),Object(r.b)("div",{className:o.a.figure},Object(r.b)("img",{src:Object(l.a)("img/docs/tutorials/02-pixi/exercise_primitives.jpg")})),Object(r.b)("h3",{id:"text"},"Text"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"go to ",Object(r.b)("inlineCode",{parentName:"li"},"examples/src/02-pixi-intro/text.ts")),Object(r.b)("li",{parentName:"ul"},"follow the instructions in the TODO block and draw an animated text"),Object(r.b)("li",{parentName:"ul"},"you can access the canvas in ",Object(r.b)("inlineCode",{parentName:"li"},"http://localhost:1234/02_text.html"))),Object(r.b)("div",{className:o.a.figure},Object(r.b)("img",{src:Object(l.a)("img/docs/tutorials/02-pixi/exercise_text.jpg")})),Object(r.b)("h3",{id:"particles"},"Particles"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"go to ",Object(r.b)("inlineCode",{parentName:"li"},"examples/src/02-pixi-intro/particles.ts")),Object(r.b)("li",{parentName:"ul"},"follow the instructions in the TODO block and create rotating particles"),Object(r.b)("li",{parentName:"ul"},"you can access the canvas in ",Object(r.b)("inlineCode",{parentName:"li"},"http://localhost:1234/02_particles.html"))),Object(r.b)("div",{className:o.a.figure},Object(r.b)("img",{src:Object(l.a)("img/docs/tutorials/02-pixi/exercise_particles.jpg")})),Object(r.b)("h3",{id:"sound"},"Sound"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"go to ",Object(r.b)("inlineCode",{parentName:"li"},"examples/src/02-pixi-intro/sound.ts")),Object(r.b)("li",{parentName:"ul"},"follow the instructions in the TODO block and play a sound when you click on the sprite"),Object(r.b)("li",{parentName:"ul"},"you can access the canvas in ",Object(r.b)("inlineCode",{parentName:"li"},"http://localhost:1234/02_sound.html"))),Object(r.b)("div",{className:o.a.figure},Object(r.b)("img",{src:Object(l.a)("img/docs/tutorials/02-pixi/exercise_sound.jpg")})))}m.isMDXComponent=!0}}]);