Jump to content
Admin

Commands

Recommended Posts

A Better formatted documentation:

 

Not all of Pixi's API is implemented on the canvas as of now (coming soon)

 

Commands are string representations of JSON objects, compressed to base64 with lz-string. (https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.js)

An example for setting a background would look like this:


JSON object:

{
  name: 'background',
  type: 'Sprite',
  imageUrl: 'https://i.imgur.com/mQa7P4D.jpg',
  anchor: { x: 0, y: 0 },
  width: 425,
  height: 600,
}

calling JSON.stringify() on that object, then passing the string to LZString.compressToBase64 gives us the command to send.

 

Basic examples

 

Setting a background:

 

{
  name: 'background',
  type: 'Sprite',
  imageUrl: 'https://i.imgur.com/mQa7P4D.jpg',
  anchor: { x: 0, y: 0 },
  width: 425,
  height: 600,
}

 

Sprites:

 

{
  name: 'bunny',
  type: 'Sprite',
  imageUrl: 'assets/bunny.png',
  x: 50,
  y: 50,
  alpha: 0.5,
}


 

{
  name: 'bunny2',
  type: 'Sprite',
  imageUrl: 'assets/bunny.png',
  x: 125,
  y: 125,
  alpha: 0.5,
  rotation: 1.57,
}

Modifying Sprites:

 

{ 
name: 'bunny', 
  x: 75, 
  y: 125, 
  alpha: 1.0, 
  tint: 0x80ff0000 
}

Deleting Sprites:

 

{ 
  name: 'bunny', 
  destroy: true 
}

 

Multiple Pixi API calls can be combined into one, under a Graphics type

 

{
  name: 'mygraphics',
  type: 'Graphics',
  commands: [
    //set a fill and line style
    ['beginFill', 0xff3300],
    ['lineStyle', 4, 0xffd900, 1],
    // draw a shape
    ['moveTo', 50, 50],
    ['lineTo', 250, 50],
    ['lineTo', 100, 100],
    ['lineTo', 50, 50],
    ['endFill'],
    // set a fill and a line style again and draw a rectangle
    ['lineStyle', 2, 0x0000ff, 1],
    ['beginFill', 0xff700b, 1],
    ['drawRect', 50, 250, 120, 120],
    // draw a rounded rectangle
    ['lineStyle', 2, 0xff00ff, 1],
    ['beginFill', 0xff00bb, 0.25],
    ['drawRoundedRect', 150, 450, 200, 100, 15],
    ['endFill'],
    // draw a circle, set the lineStyle to zero so the circle doesn't have an outline
    ['lineStyle', 0],
    ['beginFill', 0xffff0b, 0.5],
    ['drawCircle', 340, 90, 60],
    ['endFill'],
  ],
}

 

Creating a Text Style

 

{
  name: 'mystyle',
  type: 'TextStyle',
  style: {
    fontFamily: 'Arial',
    fontSize: 30,
    fontStyle: 'italic',
    fontWeight: 'bold',
    fill: ['#ffffff', '#00ff99'], // gradient
    stroke: '#4a1850',
    strokeThickness: 5,
    dropShadow: true,
    dropShadowColor: '#000000',
    dropShadowBlur: 4,
    dropShadowAngle: Math.PI / 6,
    dropShadowDistance: 6,
    wordWrap: true,
    wordWrapWidth: 440,
  },
}

 

Creating Text

 

{
  name: 'mytext',
  type: 'Text',
  x: 212,
  y: 500,
  text: 'Test',
  style: 'mystyle',
}

 

Strip animations

 

{
	name:'smilie', 
    type:'StripSprite', 
    load:'https://xat.com/content/temp/smilie40px.png'
}

 

Create a tween

 

{name:'mypath', type:'TweenPath', 
  commands:[
      ['moveTo', 25, 20],
      ['lineTo', 25, 200],
      ['arcTo', 350, 200, 450, 900, 100],
      ['lineTo', 25, 375],
      ['lineTo', 400, 100],
      ['bezierCurveTo', 400, 100, 400, 25, 25, 20] 
  ]}

 

Follow a tween

 

{
  name:'smilie', 
  type:'StripSprite', 
  load:'https://xat.com/content/temp/smilie40px.png', 
  x:340, y:190, 
  animationSpeed:0.2, 
  tween:{ path:'mypath', time:10000, loop:true } 
}

 

Add a xat style poll bar chart

 

{
  name:'mychart', 
  type:'Barchart', 
  x:12, y:375, 
  values:[10,20,30,40,50,60,70], 
  maxes:[15,30,45,60,75,90,105]
}

 

Animating Sprites (does not work as of now but feel free to mess around)

(works in Canvas 2.5 with assets from: https://pixijs.io/examples)

 

{
  name: 'plane',
  type: 'AnimatedSprite',
  load: 'https://pixijs.io/examples/required/assets/basics/fighter.json',
  x: 340,
  y: 90,
  scale: { x: 0.5, y: 0.5 },
  animationSpeed: 0.5,
  frames: [
    'rollSequence0000.png',
    'rollSequence0001.png',
    'rollSequence0002.png',
    'rollSequence0003.png',
    'rollSequence0004.png',
    'rollSequence0005.png',
    'rollSequence0006.png',
    'rollSequence0007.png',
    'rollSequence0008.png',
    'rollSequence0009.png',
    'rollSequence0010.png',
    'rollSequence0011.png',
    'rollSequence0012.png',
    'rollSequence0013.png',
    'rollSequence0014.png',
    'rollSequence0015.png',
    'rollSequence0016.png',
    'rollSequence0017.png',
    'rollSequence0018.png',
    'rollSequence0019.png',
    'rollSequence0020.png',
    'rollSequence0021.png',
    'rollSequence0022.png',
    'rollSequence0023.png',
    'rollSequence0024.png',
    'rollSequence0025.png',
    'rollSequence0026.png',
    'rollSequence0027.png',
    'rollSequence0028.png',
    'rollSequence0029.png',
  ],
}

 

For more examples please check out the official PixiJS documentation, if you find more commands that work, feel free to post them. Same for bugs.

Please keep in mind that Canvas 2.0 is still in a very early stage.

 

NOTE: Current users making games for xat are:

 

- Maverick

- Sloom

- Jedi

- Mark

  • Like 3

Share this post


Link to post
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.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  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.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.