Game Kit

A collection of personal svelte components and scripts for game development

Svelte Components

Button

<Button styles"mt-6" on:click={() => {console.log('Hello World')}>
    Hello World
</Button>

• styles: additional classes to be applied to the button element

Card

<Card transition>
    Hello World
</Card>

• transition: Should the card transition in

Fullscreen

<Fullscreen />

Game Canvas

<script>
    function update ({detail}) {
        // detail is a instance of CanvasHelper
        // Game loop logic goes here
    }
</script>

<GameCanvas bind:canvas ratio={16/9} on:update={update} styles="bg-teal-400" />

• styles: additional classes to be applied to the canvas element
• ratio: the aspect ration of the canvas
• bind:canvas: binds to the canvas element. This is useful for the MouseEvents component

Input

<Input bind:value={name} on:input={type} id="name" placeholder="John Doe" styles="mb-4" />

• bind:value: binds to the input value
• on:input: when the input field changes do this
• id: the id of the input field
• placeholder: the placeholder for the input field
• styles: additional classes to be applied to the input element

Label

<Label control="code" styles="mb-4"> Code </Label>

• control: the form element this is for
• styles: additional classes to be applied to the label element

Mouse Events

<script>
    function click({detail: point}) {
        // point is a vector with the upper left cornor of the element being 0,0
        // the largest dimension of the elelement will be of length 1
        //
        // do something
    }
</script>

<MouseEvents element={canvas}
	on:click={click}
    on:mouseMove={mouseMove}
    on:mouseUp={mouseUp}
    on:mouseDown={mouseDown}
/>
<GameCanvas bind:canvas ratio={16/9} on:update={update} styles="bg-teal-400" />

Prose

<Prose style="bg-gray-200"> Hello World </Prose>

• styles: additional classes to be applied to the div container element

Spinner

<Spinner />

Game Scripts

Bondary Bounce

let soundDirection = {
    top: this.transform.velocity.y * -1,
    right: this.transform.velocity.x,
    bottom: this.transform.velocity.y,
    left: this.transform.velocity.x * -1
}
boundaryBounce(this.transform, this.radius, new Vector, new Vector(detail.width, detail.height), direction => {
    Disc.hitSound(soundDirection[direction]);
});

Canvas Helper

<script>
    function update ({detail}) {
        //clear canvas
        detail.clear();

        // draw circle: circle (position, radius, fill)
        detail.circle(new Vector(.5, .5), .05, 'red');

        // draw svg: svgPath (d, fill, position, offset, viewBox, scale)
        detail.svgPath(arrow, 'white', ORIGIN, new Vector(0, 1), new Vector(20, 20), new Vector(scale, scale));
        
    }
</script>

<GameCanvas bind:canvas ratio={16/9} on:update={update} styles="bg-teal-400" />

Circle Bounce

circleBounce(a, b, intensity => Disc.hitSound(intensity));

Many to Many Collision

get collider () {
    return {
        shape: 'circle',
        radius: this.radius,
        position: this.transform.position
    }
}

static collisionDetection (discs) {
    manyToManyCollision(discs, (a, b) => {
        // Do something
    });
}

Transform

constructor (position = new Vector()) {
    this.transform = new Transform(position);
    this.transform.friction = .0015;
}

 update (detail) {
     this.transform.update(detail.delta);
 }

Vector

// constructor (x = 0, y = 0)
let v = new Vector(1, 1);
// or
Vector.create(1, 1);

// static generators
Vector.right;
Vector.left;
Vector.up;
Vector.down;

// getters
a = v.basic;
a = v.round;
a = v.magnitudeSquared;
a = v.magnitude;
a = v.unit;
a = v.degrees;
a = v.radians;

// methods
a = v.add(other);
a = v.subtract(other);
a = v.multiply(scalar);
a = v.distanceSquared(other);
a = v.withMagnitude(magnitude);
a = v.dot(other);
a = v.angleBetween(other);
a = v.projectOnto(other);