1.0.1 • Published 3 years ago
@jacksonfrankland/game-kit v1.0.1
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);