Canvas Commands

From xat wiki
This page contains changes which are not marked for translation.

The AppBot power allows you to send and receive commands to/from the xat Canvas side app. The Canvas app uses Pixijs and the commands are based on a subset of the Pixijs API, but are not identical. xat is providing a JavaScript library to make writing an app or game relatively simple.

Example Command

tx(userno, {name:'title', type:'Text', x:425/2, y:20, text:'Drag and drop matching smilie!'});

  • tx: Send a command to canvas.
  • userno: xat registered user id to send to, if zero - send to all.
  • name: A name (handle) for the object.
  • type: The type of object or command.
  • x: X position.
  • y: Y position.
  • text: Value of the text.

Setting a Background Image

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

Sprites (simple images)

{
 name: 'bunny',
 type: 'Sprite',
 imageUrl: 'https://i.imgur.com/mQa6P4D.jpg',
 x: 50,
 y: 50,
 alpha: 0.5,
}

Modifying Sprites

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

Deleting Sprites

{ 
 name: 'bunny', 
 destroy: true 
}

Multiple Canvas Commands on One Object

Can be combined into one, under a Graphics type (myobject in this example).

{
 name: 'myobject',
 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

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',
 ],
}

Group Separate Commands

[
  { name: 'bunny1', destroy: true },
  { name: 'bunny2', destroy: true }
]