Skip to content

Latest commit

 

History

History
97 lines (67 loc) · 3.92 KB

README.md

File metadata and controls

97 lines (67 loc) · 3.92 KB
Raw

@kudohamu/storybook-akashic

CI

@kudohamu/storybook-akashic は Storybook を使った Akashic Engine のエンティティ用のUI開発環境を提供します。
g.E や g.Label などのエンティティをエンティティ単位で視覚化し、さまざまな状態を確認しながらインタラクティブに開発できます。

Screen Shot

How to Install

$ npm i -D @kudohamu/storybook-akashic

また、利用したいAkashic Engineのバージョンが入った akashic-engine-standalone をインストールしてください。

$ npm i -D @akashic/akashic-engine-standalone

How to Use

Basic Use

ミニマルな利用であれば@storybook/reactなどと全く同じ様に、「タイトルなどのメタデータ」と「エンティティの生成に必要なパラメータを受け取ってエンティティを生成して返す関数」をstoryからエクスポートするだけでStorybookに表示することができます。

// FilledRect.stories.ts

import { Story } from '@kudohamu/storybook-akashic';

export default {
  title: 'Demo/FilledRect'
};

const Template: Story<g.FilledRectParameterObject> = (params) => {
  return new g.FilledRect({
    ...params,
    width: 200,
    height: 56,
    cssColor: 'red'
  });
};

export const Default = Template.bind({});

With Assets

表示したいエンティティが画像などのアセットを使用する場合、対象のアセットIDがどのパスから取得できるかを@kudohamu/storybook-akashicに教えてあげる必要があります。
.storybook/preview.ts または各storyファイルからエクスポートするparametersに、必要なGameConfigurationと使用するassetId(またはassetPaths)を含めることで@kudohamu/storybook-akashicがアセット情報を読み取ることができるようになります。

// .storybook/preview.ts

import { GameConfiguration } from '@akashic/akashic-engine-standalone';
import { StorybookAkashicParameters } from '@kudohamu/storybook-akashic';
const gameJson: GameConfiguration = require('../game.json');

export const parameters: StorybookAkashicParameters = {
  akashic: {
    assetIds: ['player', 'background'],
    configuration: gameJson
  }
};

また上記の情報から得られたアセットのパスにStorybookがアクセスできるようにしてください。
これは start-storybook で立ち上げる際に関連するアセットをstatic filesとして指定しなければならないことを意味します。

"scripts": {
  "storybook": "start-storybook -p 6006 -s ./game"
}

※ 上で指定している game ディレクトリはAkashic Engineで使用する audio, image, text などのディレクトリをまとめたディレクトリです

Storybookをビルドするときも同様です。

"scripts": {
  "build-storybook": "build-storybook -p 6006 -s ./game"
}

Demo Project

利用者の理解を助けるために@kudohamu/storybook-akashicを使ったデモプロジェクトを公開しています。
より実践的で詳細な使用方法は下記プロジェクトを参考にしてください。

https://github.com/kudohamu/storybook-akashic-demo

License

本リポジトリは MIT License の元で公開されています。 詳しくは LICENSE をご覧ください。