What To Do After Downloading This Project
- Open this folder in a command prompt.
- Run
yarn install
. - It is recommended to open this folder with Visual Studio Code.
Creating A New Data Pack
Configure The Data Pack
- In
src/~game/data-packs
, create a new folder. - The name of the folder should not have spaces. (Eg: icebreaking-event)
- Create a file called
config.ts
, or you can copy from thedemo
folder. - Set the
deckSize
based on how many cards you want to have in the game. - The
deckSize
should be an even number since the voices come in pairs.
Customize Back Image of The Cards
- In
src/~game/data-packs
, create a new folder calledcard-image
. - Or, you can also copy from the
demo
folder. - The image should have a ratio of
5:7
. - It is best if the image has a size of 500 x 700 pixels.
- The image must be named
image.png
. - You may save the source file alongside
image.png
to make it easy to return and edit the image when needed, it will not affect the game whatsoever.
Customizing Game Data
Part 1: Basic Structure
- In
src/~game/data-packs
, create a new folder calledcard-data
. - In
card-data
create as many folders as you see fit. - The folder names should follow this pattern
pair-01
,pair-02
...pair-99
- Note that the maximum folders allowed is 99, anything above 99 will be ignored. Attempting to name the folder as
pair-001
...pair-099
will not work. Besides, who needs that many cards to play? - Also note that if you set your
deckSize
to 12, for example, then it is expected that you will have 6 pairs of card data.
Part 2: Text Data
- In
src/~game/data-packs/(custom-name)/card-data/pair-(num)
, create a file calleddata.ts
, or copy from thedemo
folder and edit it. - Fill in the English and Japanese names of the voice actor, as well as the title and character names in card
a
and cardb
.
Part 3: Voice Actor Image
- Find a photo of the voice actor and name it as
figure.png
and put it insrc/~game/data-packs/(custom-name)/card-data/pair-(num)
. - The image should have a ratio of
3:4
. - The recommended image size is 600 × 800 pixels.
Part 4: A/B Data
- Create a folders
a
andb
insrc/~game/data-packs/(custom-name)/card-data/pair-(num)
. - Place the the voice sample in each folder and name them as
sound.mp3
. - Place the photo of the fictional characters in each folder and name them as
sprite.png
. The photo should be square, recommended size is 200 × 200 pixels.
How To Run
- Go to
src/~game/setup.ts
and change the value ofloadFrom
to the name of the folder of the data pack that you have created. - Open this folder in a command prompt.
- Run
yarn start
and go to http://localhost:3000. - To quit, return to the command prompt and press Ctrl + C