Jump to content

zzMark

Members
  • Content Count

    38
  • Joined

  • Last visited

Community Reputation

5 Standard

1 Follower

About zzMark

Personal Information

  • xat Username
    Node

Recent Profile Visitors

527 profile views
  1. zzMark

    Commands

    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
  2. zzMark

    APPBOT power intro

    Soon.
  3. zzMark

    CYAN PAWN

    I agree, it should be different. Users not following the forum automatically think he is a celebrity.
  4. zzMark

    APPBOT power, user apps and games

    Yes, user will be able to make their own games. Its just work in progress.
  5. zzMark

    APPBOT power, user apps and games

    We are working on a more advanced appbot system which already has some of your suggestions implemented. Just need @Admin and his take on it.
  6. zzMark

    APPBOT power, user apps and games

    It's gonna be pretty clear soon, we still need some adjustments and thinking
×

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.