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