Canvas Commands

From xat wiki
(Redirected from AppbotCommandReference)
Jump to: navigation, search
This page contains changes which are not marked for translation.

The AppBot power allows you to send and receive commands to 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 }
]