Glixy

glixy is a Svelte library with delightful (and leaky :P) abstraction for building PixiJS applications with ease.

Live demo

Installation

To install the package:

pnpm i glixy

Usage

Stage

The Stage component sets up the WebGL stage.

<script lang="ts">
	import { Stage } from 'glixy';
</script>

<Stage>
	<!-- Your WebGL content here -->
</Stage>

Container

The Container component is used to group and position other WebGL elements.

<script lang="ts">
	import { Container } from 'glixy';
</script>

<Container x={100} y={100}>
	<!-- Your WebGL elements here -->
</Container>

Sprite

The Sprite component is used to render images in the WebGL context.

<script lang="ts">
	import { Sprite } from 'glixy';
</script>

<Sprite
	texture="/bunny.png"
	x={150}
	y={150}
	scale={{ x: 1, y: 1 }}
	rotation={0}
/>

Components

Stage

• Under the hood it's using PixiJS Application, See API

Container

• props:
  • x: X position of the container.
  • y: Y position of the container.

Sprite

• props:
  • texture: URL of the image to be used as the texture.
  • x: X position of the sprite.
  • y: Y position of the sprite.
  • scale: Scale of the sprite.
  • rotation: Rotation of the sprite.

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License

This project is licensed under the MIT License.