Skip to content

actor

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

actor

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
_web.js
_web.js
 
 
index.js
index.js
 
 

README.md

Actor

CDN: https://unpkg.com/@litecanvas/utils/dist/actor.js

Usage

import litecanvas from "@litecanvas"
import { Actor } from "@litecanvas/utils"

let player, mySprite

litecanvas({
  loop: { init, tapped, draw },
})

// lets create a image to our actor
mySprite = paint(3, 3, ["303", "030", "303"], { scale: 10 })

function init() {
  // create a actor and pass its image
  player = new Actor(mySprite)
}

function tapped(tapx, tapy) {
  // update the actor position
  player.x = tapx
  player.y = tapy
}

function draw() {
  cls(0)

  // draw the actor sprite
  player.draw()
}

Actor#pos

Set or get the actor position vector

player.pos.x = 100
player.pos.y = 200

Note: The player.pos is a Vector instance.

Actor#x / Actor#y

Set or get the actor position X or Y

player.x = 100
player.y = 200

Actor#scale

Set or get the actor scale vector

// twice bigger
player.scale.x = 2
player.scale.y = 2

Actor#scaleBy(x, y = x)

// multiplies the scale (y is optional)
player.scaleBy(3)

// same as
player.scale.x *= 3
player.scale.y *= 3

Actor#scaleTo(x, y = x)

// sets the scale (y is optional)
player.scaleTo(3)

// same as
player.scale.x = 3
player.scale.y = 3

Actor#flipX

If true the actor sprite is flipped horizontally. Default is false.

Actor#flipY

If true the actor sprite is flipped vertically. Default is false.

Actor#anchor

Set or get the actor anchor (origin). By default, the anchor is a vector (0, 0) (meaning anchor Top Left).

// example: actor position based on their center
player.anchor.x = 0.5
player.anchor.y = 0.5

// or...
import { ANCHOR_CENTER } from "@litecanvas/utils"
player.anchor = ANCHOR_CENTER

Note: You can import and use the following constants to help you choose an actor anchor: , ANCHOR_TOP_LEFT (default), ANCHOR_TOP_RIGHT, ANCHOR_BOT_LEFT, ANCHOR_BOT_RIGHT or ANCHOR_CENTER.

Actor#angle

Set or get the actor angle (in degrees).

player.angle = 45

Actor#opacity

Set or get the actor opacity (alpha).

player.opacity = 0.5 // 50% transparent

Actor#hidden

Set or get the actor hidden (boolean) state.

player.hidden = true // hides the actor image
player.hidden = false // display the actor image

Actor#width

Get (not set) the actor current width.

console.log(player.width) // => 30

player.scale.x = 1.5

console.log(player.width) // => 45

Actor#height

Get (not set) the actor current height.

console.log(player.height) // => 30

player.scale.y = 2

console.log(player.height) // => 60

Actor#sprite

Set or get the actor sprite image. Useful to make animations.

player.sprite = anotherSprite

The actor sprite must be a Image, ImageBitmap, HTMLCanvasElement or OffscreenCanvas.

Remember, you can create images using the litecanvas' built-in paint() function or loading a image.

Actor#in(x, y, radius)

Check taps (clicks and touchs).

function tapped(x, y) {
  const pointArea = 8 // default = 1
  if (player.in(x, y, pointArea)) {
    console.log("tap!")
  }
}

Actor#col(other)

Check collision between actors

const collided = player.col(anotherActor)