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

good job @zzMark codes should be simple and very easy for all users which helps to take them in easily

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign in now

×

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.