PixiJS

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Tue Apr 18 2017 09:42:04 GMT-0400 (EDT)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: PixiJS
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: 2ccc61fc15d73827fad84a70325f4148
Keywords: 

My Notes
--------
April 7, 2017
Use XholonPixiJS.html
    http://127.0.0.1:8888/XholonPixiJS.html?app=PixiJS&src=lstr&gui=clsc

I could use the KLay library to layout the model
 - ef/other/Xholon2KLayJson.java
 - ex: http://127.0.0.1:8888/XholonKLayD3.html?app=Cell&gui=clsc
 - it can generate a _jsdata object with posh, posw, posx, posy

Perhaps each Xholon node could allow an optional <Sprite>...</Sprite> tag
 - JSON or other content that could be used to generate a PIXI Sprite

Experimennt with Collision Detection:
 - PIXI code
 - bump.js  https://github.com/kittykatattack/bump
 - other JS libraries

PixiJS uses a scene graph.

Xholon2PixiJS exporter:
_twod,PixiJS
pixiSystem_46
{"shouldShowStateMachineEntities":false,"nameTemplate":"^^C^^^","layouter":"KLayJson","width":100,"height":300,"spacing":20,"nodeWidth":30,"nodeHeight":20,"maxChars":3}

References
----------
(1) http://www.pixijs.com/
    The HTML5 Creation Engine
    Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
    Fast - PixiJS' strength is speed. When it comes to 2D rendering, PixiJS is the fastest there is.
    Flexible - Friendly, feature-rich API lets PixiJS take care of the fundamentals whilst you focus on producing incredible multiplatform experiences.
    Free - PixiJS is and always will be Open Source, with a large and supportive community pushing its growth and evolution.

(2) https://github.com/kittykatattack/learningPixi/
  ) https://github.com/kittykatattack/learningPixi/tree/master/examples

(3) google: PIXI layout

(4) https://github.com/bfanger/pixi-inspector
    An extension to the Chrome DevTools for inspecting Pixi.js games/applications.
    Features:
     Shows the scene graph
     View and edit the properties of the selected node
     The selected node is available in the Console as $pixi
     Highlight (the bounds of) the node on hover
     Select a node with the mouse.
    written in JavaScript
  ) https://chrome.google.com/webstore/detail/pixi-inspector/aamddddknhcagpehecnhphigffljadon
    I've added this to Chrome

(5) https://en.wikipedia.org/wiki/Scene_graph

(6) https://two.js.org/
    an alternative to PixiJS
    Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.

(7) https://en.wikipedia.org/wiki/Entity%E2%80%93component%E2%80%93system
    Entity-component system (ECS) is an architectural pattern that is mostly used in game development. An ECS follows the Composition over inheritance principle that allows greater flexibility in defining entities where every object in a game's scene is an entity (e.g. enemies, bullets, vehicles, etc.). Every Entity consists of one or more components which add additional behavior or functionality. Therefore, the behavior of an entity can be changed at runtime by adding or removing components. This eliminates the ambiguity problems of deep and wide inheritance hierarchies that are difficult to understand, maintain and extend. Common ECS approaches are highly compatible and often combined with data oriented design techniques.

(8) https://en.wikipedia.org/wiki/Composition_over_inheritance

(9) https://en.wikipedia.org/wiki/A-Frame_(virtual_reality_framework)

(10) https://en.wikipedia.org/wiki/Space_partitioning
    In geometry, space partitioning is the process of dividing a space (usually a Euclidean space) into two or more disjoint subsets (see also partition of a set). In other words, space partitioning divides a space into non-overlapping regions. Any point in the space can then be identified to lie in exactly one of the regions.

(11) http://osgjs.org/
    OSGJS is a WebGL framework based on OpenSceneGraph concepts. It allows an individual to use an "OpenSceneGraph-like" toolbox to interact with WebGL via JavaScript

(12) https://bl.ocks.org/iros/36a18c646f3b3b5b9001ad758bfd8a08
    D3 Force Layout + Pixi.js Experiment

(13) http://gilamran.github.io/simple-layout-basic-tutorial/
    simple-layout-js is a lightweight yet powerful generic layout engine for canvas based games and apps. The engine will help you fit your game/app to any device resolution, it uses percent based width and height.

]]></Notes> 

<_-.XholonClass>
  <PhysicalSystem/>
  <PixiSystem/>
  
  <PixiJS/>
  
  <!-- source [2] -->
  <DisplayingTheCanvas/>
  <PositionAndRotation/>
  
  <Behaviors/>
  
</_-.XholonClass>

<xholonClassDetails>
  <PixiJS>
    <Icon>./images/losttv/zelda5_circ.png</Icon>
  </PixiJS>
  <Avatar>
    <Color>0xFF0000</Color>
  </Avatar>
</xholonClassDetails>

<PhysicalSystem>
  <PixiSystem>
    <PixiJS><Color>0x0000FF</Color></PixiJS>
    <PixiJS><Color>0x4040FF</Color></PixiJS>
    
    <DisplayingTheCanvas><Color>0x9966FF</Color></DisplayingTheCanvas>
    <PositionAndRotation><Color>0x00FF00</Color></PositionAndRotation>
  </PixiSystem>
  
  <Behaviors/>
</PhysicalSystem>

<PixiJSbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
var me, app, bunny, delta, ava, beh = {
postConfigure: function() {
  me = this.cnode.parent();
  ava = null;
  $wnd.xh.param("TimeStepInterval","50");
  // PIXI.Application is a convenience class
  app = new $wnd.PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
  //$doc.body.appendChild(app.view);
  $doc.querySelector("div#xhcanvas").appendChild(app.view);

  // create a new Sprite from an image path
  bunny = $wnd.PIXI.Sprite.fromImage(me.xhc().icon());

  // center the sprite's anchor point
  bunny.anchor.set(0.5);

  // move the sprite to the center of the screen
  bunny.x = app.renderer.width / 2;
  bunny.y = app.renderer.height / 2;

  app.stage.addChild(bunny);

  // delta is 1 if running at 100% performance
  // creates frame-independent tranformation
  delta = 1;
  
  var message = new $wnd.PIXI.Text(
    me.name(),
    {fontFamily: "Arial", fontSize: 32, fill: "white"}
  );
  message.position.set(0, 0);
  app.stage.addChild(message);
  
  me.xpath("ancestor::PhysicalSystem/descendant::Behaviors").append(this.cnode.remove());
},
act: function() {
  bunny.rotation += 0.1 * delta;
  var last = me.last();
  if (!ava && last && last.xhc().name() == "Avatar") {
    ava = new $wnd.PIXI.Graphics();
    ava.beginFill(last.xhc().color()); //(0xFF0000);
    ava.drawCircle(0, 0, 20);
    ava.endFill();
    ava.x = 40;
    ava.y = 50;
    app.stage.addChild(ava);
  }
  else if (ava && (!last || last.xhc().name() != "Avatar")) {
    app.stage.removeChild(ava);
    ava = null;
  }
}
}
//# sourceURL=PixiJSbehavior.js
]]></PixiJSbehavior>

<DisplayingTheCanvasbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
// https://github.com/kittykatattack/learningPixi/tree/master/examples/02_displayingTheCanvas.html
var me, renderer, stage, rectangle, circle, svgMarble, beh = {
postConfigure: function() {
me = this.cnode.parent();

//Create the renderer
renderer = $wnd.PIXI.autoDetectRenderer(256, 256);

/* You can also create a renderer with more advanced options like this:
//Create a Pixi renderer 
var renderer = PIXI.autoDetectRenderer(
  256,                     //Width 
  256,                     //Height
  {                        //Options
    antialiasing: false, 
    transparent: false, 
    resolution: 1
  }, 
  false                    //Optionally force canvas rendering
);

//Force canvas rendering like this: 
//var renderer = new PIXI.CanvasRenderer(256, 256);

//Force WebGL rendering like this:
//var renderer = new PIXI.WebGLRenderer(256, 256);
*/

//Add the canvas to the HTML document
//$doc.body.appendChild(renderer.view);
$doc.querySelector("div#xhcanvas").appendChild(renderer.view);

//Create a container object called the `stage`. The `stage` is the 
//root container for all your objects
stage = new $wnd.PIXI.Container();

var message = new $wnd.PIXI.Text(
  me.name(),
  {fontFamily: "Arial", fontSize: 20, fill: "white"}
);
message.position.set(0, 0);
stage.addChild(message);

rectangle = new $wnd.PIXI.Graphics();
rectangle.lineStyle(4, 0xFF3300, 1);
rectangle.beginFill(0x66CCFF);
rectangle.drawRect(0, 0, 64, 64);
rectangle.endFill();
rectangle.x = 170;
rectangle.y = 170;
stage.addChild(rectangle);

circle = new $wnd.PIXI.Graphics();
circle.beginFill(me.color());
circle.drawCircle(0, 0, 20);
circle.endFill();
if (me._jsdata) {
  circle.x = me._jsdata.posx;
  circle.y = me._jsdata.posy;
}
else {
  circle.x = 20;
  circle.y = 20;
}
rectangle.addChild(circle);

// this test of SVG works, but it prevents the loader in PositionAndRotationbehavior from working
/*$wnd.PIXI.loader
  .add("icons/marble.svg")
  .load(setup);

function setup() {
  svgMarble = new $wnd.PIXI.Sprite($wnd.PIXI.loader.resources["icons/marble.svg"].texture);
  svgMarble.x = 30;
  svgMarble.y = 30;
  stage.addChild(svgMarble);
}*/

var texture = $wnd.PIXI.Texture.fromImage('icons/marble.svg');
svgMarble = new $wnd.PIXI.Sprite(texture);
//svgMarble._textureID should not be undefined if the texture has finished processing the SVG file
svgMarble.x = 30;
svgMarble.y = 30;
stage.addChild(svgMarble);

//If you want to make the canvas fill the entire window, you can apply this
//CSS styling:
/*
renderer.view.style.position = "absolute"
renderer.view.style.width = window.innerWidth + "px";
renderer.view.style.height = window.innerHeight + "px";
renderer.view.style.display = "block";
*/

//The `renderer.view` is just an ordinary `<canvas>` element.
//Here's how you can reference to add an optional dashed 
//border around the canvas 
renderer.view.style.border = "1px dashed black";

//To resize the canvas
renderer.resize(512, 512);

//To change the background color
renderer.backgroundColor = 0x061639;

//Tell the renderer to render the stage
renderer.render(stage);

me.xpath("ancestor::PhysicalSystem/descendant::Behaviors").append(this.cnode.remove());
},
act: function() {
  rectangle.x++;
  if (rectangle.x >= 512) {
    rectangle.x = 0;
  }
  circle.y++;
  if (circle.y > 50) {
    circle.y = 0;
  }
  renderer.render(stage);
}
}
//# sourceURL=DisplayingTheCanvasbehavior.js
]]></DisplayingTheCanvasbehavior>

<PositionAndRotationbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
// https://github.com/kittykatattack/learningPixi/tree/master/examples/06_positionAndRotation.html
var me, PIXI, beh = {
postConfigure: function() {
me = this.cnode.parent();

const PIXI = $wnd.PIXI;

//Aliases
var Container = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    TextureCache = PIXI.utils.TextureCache,
    Sprite = PIXI.Sprite;

//Create a Pixi stage and renderer and add the 
//renderer.view to the DOM
var stage = new Container(),
    renderer = autoDetectRenderer(256, 256);
//$doc.body.appendChild(renderer.view);
$doc.querySelector("div#xhcanvas").appendChild(renderer.view);

var message = new $wnd.PIXI.Text(
  me.name(),
  {fontFamily: "Arial", fontSize: 16, fill: "white"}
);
message.position.set(0, 0);
stage.addChild(message);

//load an image and run the `setup` function when it's done
loader
  .add("images/learningPixi/cat.png")
  .load(setup);

function setup() {

  //Create the `cat` sprite from the texture
  var cat = new Sprite(resources["images/learningPixi/cat.png"].texture);

  //Position the sprite and change its width and height
  cat.x = 96;
  cat.y = 96;

  //Optionally change the width and height
  cat.width = 80;
  cat.height = 120;

  //Optionally center the sprite's anchor point
  cat.anchor.x = 0.5;
  cat.anchor.y = 0.5;
 
  //Rotate the sprite
  cat.rotation = 0.3;

  //You can use this alternative syntax to set the
  //sprites anchor point, scale and rotation
  /*
  cat.anchor.set(0.5, 0.5);
  cat.position.set(120, 120);
  cat.scale.set(1.5, 3);
  */

  //Add the cat to the stage
  stage.addChild(cat);
  
  //Render the stage   
  renderer.render(stage);
  
}
  me.xpath("ancestor::PhysicalSystem/descendant::Behaviors").append(this.cnode.remove());
},
act: function() {
  
}
}
//# sourceURL=PositionAndRotationbehavior.js
]]></PositionAndRotationbehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>PixiJS</title>
    <rect id="PhysicalSystem/PixiJS" fill="#98FB98" height="50" width="50" x="25" y="0"/>
    <g>
      <title>PixiJS</title>
      <rect id="PhysicalSystem/PixiJS" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
    </g>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>