Skip to content

Commit

Permalink
add titles to all doc files, rewrite setup
Browse files Browse the repository at this point in the history
  • Loading branch information
lajbel committed Mar 24, 2024
1 parent 452a200 commit c6ca6b1
Show file tree
Hide file tree
Showing 8 changed files with 54 additions and 20 deletions.
6 changes: 5 additions & 1 deletion doc/comp.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
# Custom Component
---
title: Custom Components
---

# Custom Components

Kaboom uses a flexible component system that helps you compose game logic.

Expand Down
7 changes: 4 additions & 3 deletions doc/dev.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
title: Contributing
---

# Developing Kaboom

To start developing Kaboom, first clone the github repo
Expand Down Expand Up @@ -36,6 +40,3 @@ $ npm run check
- `scripts/` development scripts
- `sprites/` some examples sprites
- `src/` kaboom library source code
## Source code overview

(todo)
4 changes: 4 additions & 0 deletions doc/intro.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
title: Getting started
---

# Intro to Kaboom

Welcome! Kaboom is a JavaScript library that helps you make games fast and fun :D
Expand Down
4 changes: 4 additions & 0 deletions doc/migration-3000.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
title: Migratin from v2000 to v3000
---

# Migrating from v2000 to v3000

- `obj._id` is renamed to `obj.id`
Expand Down
4 changes: 4 additions & 0 deletions doc/publishing.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
title: Publishing
---

# Publishing a Kaboom game
When we finish our game, the most important time it's here...
Publish it!
Expand Down
40 changes: 28 additions & 12 deletions doc/setup.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,33 @@
# Setting up Kaboom Development
---
title: Installation
---

## Using `create-kaboom` to generate kaboom project
# Installation

The most easy way to get started with Kaboom is to use the [CLI tool](https://www.npmjs.com/package/create-kaboom), which will generate a Kaboom project for you:

```sh
$ npm init kaboom -- mygame
$ cd mygame
$ npm run dev
```

This will create a directory `mygame` containing everything you need to start a Kaboom project, go to that directory and run `npm run dev` to start the development server, and edit `src/main.js` to develop the game.
This will create your game in the `mygame` directory, and start a development server for you to preview your game. If you edit `src/main.js` and refresh the page, you will see your changes.

to see all options, run
To see all options, run:

```sh
$ npm init kaboom -- --help
```

## Using CDN
## Using a CDN

Getting the package from a CDN provider is the quickest and easiest way to start using Kaboom.

```html
<script type="module">
// import kaboom lib
// import kaboom.js
import kaboom from "https://unpkg.com/kaboom@3000.0.1/dist/kaboom.mjs";
// initialize kaboom context
Expand All @@ -38,23 +44,33 @@ add([

You can paste this directly in a `.html` file and open with the browser. This will give you the standard fullscreen Kaboom canvas. Feel free to put more HTML in there.

The Kaboom package is deployed to NPM, so it's availbale on various CDN providers, like `unpkg`, `skypack`, `jsdelivr`, etc.

The example above is using Kaboom with es6 module, you can also just include it with a `<script>` tag
The Kaboom package is deployed to npm, so it's availbale on various CDN providers, like `unpkg`, `skypack`, `jsdelivr`, etc.

You can also just include it with a `<script>` tag.
```html
<script src="https://unpkg.com/kaboom@3000.0.1/dist/kaboom.js"></script>

<script>
kaboom();
</script>
```

## Using NPM
## Setup your own Node.js environment

With NPM it's easier have some other packages and do version control, also it's easier to get typescript autocomplete support and stuff, but it requires a bit more setup.
With Node.js and npm it's easier have some other packages and use version control, also it's easier to get typescript autocomplete support, but it requires a bit more setup. (This is the way of `create-kaboom`)

```sh
$ npm install kaboom
```

but you'll need to use a bundler to use Kaboom with NPM. There's a lot of options like `esbuild`, `webpack`, `parcel`, `vite`, etc, here I'll give a short example of how to use Kaboom with [`esbuild`](https://esbuild.github.io/).
You'll need to use a bundler to use Kaboom with NPM. There's a lot of options like:

- `esbuild`,
- `webpack`,
- `parcel`,
- `vitejs`,

This is a short example of how to use Kaboom with ["esbuild"](https://esbuild.github.io/).

Once you have `esbuild` installed, and you have this in a `.js` or `.ts` file:

Expand Down
3 changes: 0 additions & 3 deletions doc/shader.md

This file was deleted.

6 changes: 5 additions & 1 deletion doc/tips.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
# Tips
---
title: Optimization
---

# Optimization Tips

Here's some tips on optimizing performance / maintainability for kaboom games

Expand Down

0 comments on commit c6ca6b1

Please sign in to comment.