Skip to content

Commit

Permalink
doc: 2d section
Browse files Browse the repository at this point in the history
  • Loading branch information
Gugustinette committed Aug 30, 2024
1 parent 31ee2cd commit d983387
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 0 deletions.
6 changes: 6 additions & 0 deletions docs/guide/2d/container.md
Original file line number Diff line number Diff line change
@@ -1 +1,7 @@
# Container

Every [`FComponent`](/api/2d/classes/FComponent) in `@fibbojs/2d` has a `container` property that corresponds to the [PixiJS Container](https://pixijs.com/8.x/guides/components/containers) that will be used to render the component.

This is either a [Graphics](https://pixijs.com/8.x/guides/components/graphics) (for squares, circles,...) or a [Sprite](https://pixijs.com/8.x/guides/components/sprites) (basically an image) depending on the component.

Unless you have a good reason to do so, you should not modify the `container` directly, but use the provided methods instead.
34 changes: 34 additions & 0 deletions docs/guide/2d/polygons.md
Original file line number Diff line number Diff line change
@@ -1 +1,35 @@
# Polygons

Fibbo provides a simple way to create polygons in 2D.

For now, only 2 types of polygons are supported: squares and circles.

## Squares

To create a square, you can use the `FSquare` class. Here is an example:

```typescript
import { FSquare } from '@fibbojs/2d'

const square = new FSquare({
position: { x: 0, y: 5 },
scale: { x: 1, y: 1 },
})
```

This will create a square with a size of `1` at the position `(0, 5)`.

## Circles

To create a circle, you can use the `FCircle` class. Here is an example:

```typescript
import { FCircle } from '@fibbojs/2d'

const circle = new FCircle({
position: { x: 0, y: 5 },
scale: { x: 1, y: 1 },
})
```

This will create a circle with a radius of `1` at the position `(0, 5)`.
18 changes: 18 additions & 0 deletions docs/guide/2d/sprites.md
Original file line number Diff line number Diff line change
@@ -1 +1,19 @@
# Sprites

Sprites are the most common way to display objects in a 2D game. They are essentially 2D images that can be moved, rotated, and scaled in the scene.

## Creating a sprite

To create a sprite, you can use the `FSprite` class. Here is an example:

```typescript
import { FSprite } from '@fibbojs/2d'

const sprite = new FSprite({
path: 'path/to/image.png',
position: { x: 0, y: 5 },
scale: { x: 1, y: 1 },
})
```

This will create a sprite with the image located at `path/to/image.png` at the position `(0, 5)`.

0 comments on commit d983387

Please sign in to comment.