- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2023-12-17T20:33:40+09:00","default:discord","discord")
* はじめまして [#b257db9d]
#author("2024-04-12T00:35:13+09:00","default:discord","discord")
* Suika2チュートリアル [#m6fd37e6]
&br;
** Suika2の世界へようこそ！ [#c12d7c05]
このチュートリアルでは、Suika2を使ってノベルゲームを作成する方法を説明します。
内容はとってもかんたんです。用意はいいですか？さあ、始めましょう！
** 途中でわからなくなったら…… [#w9fedf0c]
もしチュートリアルの内容でわからないことがあれば、遠慮なく下のチャットで質問してください！
** 1. Suika2でスクリプトを作成する準備 [#k83463b7]
[[https://discord.gg/TCQ4J58F2c]]
*** 準備 [#k9974efe]
&br;
ここではWindowsを使います。
** 1. インストールする [#w011849d]
まずはじめに、 ダウンロード したSuika2のEXEファイルを実行すると、デスクトップにSuika2アイコンが作成されます。これを起動してください。
ここではWindowsを使います。[[https://suika2.com/dl/]]にアクセスします。
1. 「新規ゲームを作成します。」というウィンドウが表示されますので、「はい」をクリックしてください
2. ゲームの作成先を選択するウィンドウが表示されますので、新しいフォルダを作成して、「開く」を押してください
3. 「全画面スタイルにしますか？」という質問が表示されますので、「いいえ」を押してください
&br;
↓画面1.
#ref(チュートリアル/001-download.png,fit)
以上でサンプルゲームが生成されます。
&br;
↓画面2.
#ref(チュートリアル/002-run-installer.png,fit)
表示されたSuika2のメニューから、「ファイル」→「ゲームフォルダ」を開くを選択します。すると、下記のようなフォルダが作成されていることがわかります。 これがゲームの中身です。
&br;
↓画面3.
#ref(チュートリアル/003-installer1.png,fit)
|LEFT:150 |LEFT:300|c
|名前 |役割 |
|anime/ |アニメファイルを格納するフォルダです|
|bg/ |背景画像を格納するフォルダです|
|bgm/ |BGMを格納するフォルダです|
|cg/ |メッセージボックス等のシステム画像を格納するフォルダです|
|ch/ |キャラクタ画像を格納するフォルダです|
|conf/ |設定ファイルを格納するフォルダです|
|cv/ |ボイスを格納するフォルダです|
|font/ |フォントを格納するフォルダです|
|sav/ |セーブデータを格納するフォルダです|
|se/ |効果音を格納するフォルダです|
|tools/ |便利ツールやWeb/Android/iOS用のファイルが入ったフォルダです|
|txt/ |シナリオを格納するフォルダです|
|wms/ |プラグインを格納するフォルダです|
&br;
↓画面4.
#ref(チュートリアル/004-installer2.png,fit)
このサンプルゲームに変更を加えてチュートリアルを進めていきます。
&br;
↓画面5.
#ref(チュートリアル/005-installer3.png,fit)
まだサンプルゲームをプレイしていなければ、イメージをつかむために、 一度サンプルゲームをプレイしてみてください。
&br;
↓画面6.
#ref(チュートリアル/006-run-pro.png,fit)
*** スクリプトを開く [#f9e1b11e]
&br;
↓画面7.
#ref(チュートリアル/007-boot.png,fit)
サンプルゲームのフォルダ構成を確認していただいたところで、次に移ります。
&br;
txt フォルダを開くと、 init.txt というファイルがあります。
** 2. 既存スタイルでゲームを作成する [#i5976639]
このファイルが、ゲームの起動後、最初に読み込まれるスクリプト(Suika2への指示書)です。
&br;
init.txt をダブルクリックして開いていただければ、 ただの文字の並び(テキストファイル)であることがわかるはずです。
ここでは日本語アドベンチャー形式でゲームを作成します。
*** 好きなテキストエディタを使おう [#cc27c17d]
&br;
↓画面8.
#ref(チュートリアル/008-template.png,fit)
init.txt をダブルクリックすると開くのは、Windows標準のメモ帳というアプリだと思います。
メモ帳以外にも便利なテキストエディタがたくさんあります。
テキストエディタの選択次第で作業効率が大きく変わります。
たとえば、人気のVisual Studio Code を使えば、コマンド入力の補完が利用できます。
&br;
↓画面9.
#ref(チュートリアル/009-new-folder.png,fit)
** 2. Suika2で背景を表示する方法 [#mb077bad]
&br;
↓画面10.
#ref(チュートリアル/010-select-folder.png,fit)
&br;
↓画面11.
#ref(チュートリアル/011-save.png,fit)
&br;
↓画面12.
#ref(チュートリアル/012-start.png,fit)
&br;
** 3. ゲームフォルダを確認する [#m3fbb109]
生成されたゲームのフォルダを開いてみます。
&br;
↓画面13.
#ref(チュートリアル/013-open-folder.png,fit)
&br;
↓画面14.
#ref(チュートリアル/014-game-folder.png,fit)
&br;
それぞれのフォルダがゲームの中身です。ファイルの振り分けは下記のようになっています。
&br;
●100%必要なので覚えたいフォルダ
&br;
|LEFT:200 |LEFT:300|c
|名前|役割|
|bg/ |背景画像を格納するフォルダです|
|ch/|キャラクタ画像を格納するフォルダです|
|txt/|シナリオを格納するフォルダです|
&br;
●すべてのフォルダ（カスタマイズ時に必要なところだけ開けばよい）
&br;
|LEFT:200|LEFT:300|c
|名前|役割|
|anime/|アニメファイルを格納するフォルダです|
|bg/|背景画像を格納するフォルダです|
|bgm/|BGMを格納するフォルダです|
|cg/|メッセージボックス等のシステム画像を格納するフォルダです|
|ch/|キャラクタ画像を格納するフォルダです|
|conf/|設定ファイルを格納するフォルダです|
|cv/|ボイスを格納するフォルダです|
|font/|フォントを格納するフォルダです|
|sav/|セーブデータを格納するフォルダです|
|se/|効果音を格納するフォルダです|
|txt/|シナリオを格納するフォルダです|
|wms/|プラグインを格納するフォルダです|
&br;
このゲームに変更を加えてチュートリアルを進めていきます。イメージをつかむために「続ける」ボタンを押してプレイしてみてください。
&br;
↓画面15.
#ref(チュートリアル/015-test-play.png,fit)
&br;
** 4. Suika2で背景を表示する方法 [#mb077bad]
&br;
*** 背景を表示する [#m25a1909]
init.txt がテキストファイルであることを確認していただいたところで、次は背景の表示に移ります。
右側の編集画面に表示されているのは txt フォルダに入っている init.txt というファイルです。
ここで一度、 init.txt の中身をすべて削除して、次の内容を貼り付け、保存してみてください。
ここで一度、テキストの中身をすべて削除して、次の内容を貼り付け、改行キーを押して実行してみてください。
@bg roof.png 1.0
@click
保存したら、 Suika2を起動して、ゲームプロジェクトを開きます。
&br;
↓画面16.
#ref(チュートリアル/016-bg-edit.png,fit)
&br;
「続ける」ボタンを押して、ゲームを実行します。
&br;
↓画面17.
#ref(チュートリアル/017-bg-result.png,fit)
&br;
屋上の背景が表示されるはずです。
このように屋上の背景が表示されるはずです。
@bg というのが背景を表示する命令(コマンド)で、 roof.png は bg フォルダの中のファイル名、 1.0 は画面の表示が完了するまで(フェードイン)の時間(秒)です。
&br;
** 3. Suika2でキャラを表示する方法 [#qb7b5f82]
背景を表示できたところで、次はキャラクタの表示に移ります。
init.txt の中身をすべて削除して、次の内容を貼り付け、保存してみてください。
init.txt の中身をすべて削除して、次の内容を貼り付け、先頭行をポイントして「移動」ボタンを押し、「続ける」ボタンを押してください。
@bg roof.png 1.0
@ch center 001-fun.png 1.0
@click
保存したら、Suika2を再起動してゲームを実行します。
屋上の背景が表示され、続いてキャラクタが表示され、クリックを行うと、終了するはずです。
@ch というのがキャラクタを表示するコマンドで、 center は表示位置(中央)、 001-fun.png は ch フォルダの中のファイル名、 1.0 はフェードインの時間(秒)です。
&br;
** 4. Suika2でメッセージとセリフを表示する方法 [#w8fe4966]
&br;
*** メッセージとセリフを表示する [#g3089d6f]
背景、キャラクタを表示できたところで、次はメッセージとセリフの表示に移ります。
init.txt の中身をすべて削除し、次の内容を貼り付け、保存してみてください。
init.txt の中身をすべて削除し、次の内容を貼り付け、実行してみてください。
@bg roof.png 1.0
@ch center 001-fun.png 1.0
メッセージボックスにテキストを表示するのが"メッセージ"です。
メッセージボックスにテキストを表示するのが"メッセージ"です。
みどり「キャラクタの名前を付けたメッセージが"セリフ"です。」
*みどり*キャラクタの名前を付けたメッセージが"セリフ"です。
*みどり*011.ogg*セリフにはボイスをつけることができます。
保存したら、ゲームを実行します。
先ほどのキャラクタが表示されたあと、メッセージとセリフが表示されるはずです。
メッセージとして認識される行は、 普通の文章の行(先頭が @ や * や : ではない行)です。
名前付きのセリフとして認識される行は、先頭が * で始まる行か、名前「メッセージ」の形式の行です。
セリフとして認識される行は、先頭が * で始まる行か、名前「メッセージ」の形式の行です。
また、名前の付かないメッセージとして認識される行は、 普通の文章の行(先頭が @ や * や : ではない行)です。
&br;
** 5. Suika2でBGM(音楽)を再生する方法 [#x51428a6]
&br;
*** BGMを再生する [#sb3ffe7d]
メッセージ、セリフを表示できたところで、次はBGMの再生に移ります。
init.txt の中身をすべて削除して、次の内容を貼り付け、保存してみてください。
init.txt の中身をすべて削除して、次の内容を貼り付け、実行してみてください。
@bgm 01.ogg
@bg roof.png 1.0
@ch center 001-fun.png 1.0
保存したら、Suika2を再起動してゲームを実行します。
BGMが再生され、先ほどのキャラクタが表示されるはずです。
@bgm はBGM再生コマンドを表します。
01.ogg は bgm フォルダのファイル名を表します。
再生できるファイルは、44.1kHzのOgg Vorbis形式です。ステレオ、モノラルのどちらでも構いません。
ちなみに、01.ogg を 02.ogg に書き換えて実行してみてください。 曲が変わります。
&br;
** 6. Suika2で選択肢を表示する方法 [#ibf0bb96]
&br;
*** 選択肢を表示する [#meae76af]
BGMの再生ができたところで、次は選択肢の表示に移ります。
init.txt の中身をすべて削除して、次の内容を貼り付け、保存してみてください。
init.txt の中身をすべて削除して、次の内容を貼り付け、実行してみてください。
@bg roof.png 1.0
@ch center 001-fun.png 1.0
さて、学校へ行くか。
@choose label1 歩いて行こう label2 自転車で行こう label3 やっぱりサボろう
@choose label1 歩いて行こう label2 自転車で行こう
:label1
歩いて行くことにした。
@goto end
:label2
自転車で行くことにした。
@goto end
:label3
今日は休むことにした。
:end
保存したら、Suika2を再起動してゲームを実行します。
3つの選択肢が表示されるはずです。
コピペしたら、ゲームを実行します。3つの選択肢が表示されるはずです。
@choose は選択肢コマンドを表し、 label1, label2, label3 は選択肢が選ばれたときにジャンプする先のラベルです(後述)。
@choose は選択肢コマンドを表し、 label1, label2 は選択肢が選ばれたときにジャンプする先のラベルです(後述)。
ラベルと選択肢がセットです。
:label1 は、ジャンプ先として指定されるラベルです。
ラベルの行は、ゲームの見た目の上では何も実行されません。
&br;
*** より便利な書き方 [#uab04aff]
別な書き方として、次のようなスタイルもあります。
この場合、ラベルは省略できます。
お好みの方法を使ってください。
別な書き方として、次のようなスタイルもあります。この場合、ラベルは省略できます。お好みの方法を使ってください。
@bg roof.png 1.0
@ch center 001-fun.png 1.0
さて、学校へ行くか。
<<<
switch "歩いて行こう" "自転車で行こう" "やっぱりサボろう" {
case:
switch "歩いて行こう" "自転車で行こう" {
case "歩いて行こう":
歩いて行くことにした。
break
case:
case "自転車で行こう":
自転車で行くことにした。
break
case:
今日は休むことにした。
break
}
>>>
&br;
** 7. Suika2でシナリオを分岐させる方法 [#z37c0776]
&br;
*** フラグを立てて分岐する [#i6169c85]
選択肢の表示ができたところで、次はフラグを立てて分岐する処理に移ります。
これができればノベルゲームがひとまず形になります。
init.txt の中身をすべて削除して、次の内容を貼り付け、保存してみてください。
init.txt の中身をすべて削除して、次の内容を貼り付け、実行してみてください。
@bg roof.png 1.0
@ch center 001-fun.png 1.0
さて、学校へ行くか。
<<<
switch "歩いて行こう" "自転車で行こう" "やっぱりサボろう" {
case:
switch "歩いて行こう" "自転車で行こう" {
case "歩いて行こう":
歩いて行くことにした。
@set $1 = 1
@set $1 = true
break
case:
case "自転車で行こう":
自転車で行くことにした。
break
case:
今日は休むことにした。
break
}
>>>
@if $1 == 0 NO_MONEY
@if $1 == false NO_MONEY
お金を拾った。
:NO_MONEY
保存したら、Suika2を再起動してゲームを実行します。
「歩いて行こう」を選択した場合だけ、「お金を拾った。」が表示されるはずです。
ここでは @set と @if を組み合わせています。
@set は、変数設定コマンドを表します。
続く $1 は、変数番号1に値を格納することを意味します。
続く = は、単純な代入であることを意味します(他にも計算ができます)。
1 は、整数の1を代入することを意味します。
変数の初期値は 0 ですので、「歩いて行こう」が選択されたときだけ、変数 $1 の値が 1 になります。
@set は、フラフを立てるコマンドです。
続く $1 は、変数番号1に値trueをセットすることを意味します。
続く = は、単純な代入であることを意味します(他にも計算ができますが、ここでは割愛します)。
true は、整数の1を代入することを意味します。
変数の初期値は 0、つまり false ですので、「歩いて行こう」が選択されたときだけ、変数 $1 の値が true になります。
@if は、条件分岐です。
$1 == 0 は、変数 $1 の値が 0 の場合、という条件を意味します。
$1 == false は、変数 $1 の値が false、つまり 0 の場合、という条件を意味します。
NO_MONEY は、ラベルの名前です。条件に一致したとき、:NO_MONEY という行にジャンプします。
変数の初期値は 0 ですので、結果として、「歩いて行こう」を選択した場合だけ、「お金を拾った。」が表示されることになります。
変数の初期値は 0、つまり false ですので、結果として、「歩いて行こう」を選択した場合だけ、「お金を拾った。」が表示されることになります。
変数の使い方は0/1のフラグだけではなく、好感度などの数値を持つこともできます。
変数の使い方は0/1やfalse/trueのフラグだけではなく、好感度などの数値を持つこともできます。
詳細はコマンド・リファレンスの @set と @if をご覧ください。
ただ、スクリプトをシンプルに保つためには、なるべく0/1のフラグとして運用する方が望ましいと思います。
&br;
*** より便利な書き方 [#b8e405bc]
ちなみに、@if を便利にした書き方もあります。拡張if文と呼ばれています。
ラベルやジャンプがよくわからないときは、この書き方を使ってみてください。
<<<
if $1 == 0 {
お金を拾った。
}
>>>
&br;
** 8. Suika2でメニュー画面を表示させる方法 [#l50c0a28]
&br;
*** メニュー画面を表示する [#w1b0baf9]
シナリオの分岐ができたところで、 ちょっとステップアップして、 タイトル画面やメニュー画面の作成方法を説明します。
init.txt の中身をすべて削除して、次の内容を貼り付け、保存してみてください。
init.txt の中身をすべて削除して、次の内容を貼り付け、実行してみてください。
@gui menu.txt
:START
:LOAD
:CONFIG
:QUIT
保存したら、とりあえずゲームを実行してみてください。サンプルゲームのタイトル画面が表示されるはずです。
ゲームを実行すると、タイトル画面が表示されるはずです。
詳しく見ていきます。
@gui menu.txt というコマンドは、メニュー画面(GUIと呼ばれる)を表示するコマンドです。
これは gui フォルダの menu.txt というファイルで設定されているメニュー画面を表示しています。menu.txt はGUIファイルと呼ばれています。
GUIファイルの書き方については、 [[タイトル画面の作り方]] を参照 してください。
何やら難しそうと思われるかもしれませんが、理解してしまえばとても便利に使えます。
何やら難しそうと思われるかもしれませんが、Photoshopのレイヤーを理解していれば、とても便利に使っていただけます。
&br;
** 9. Suika2でスクリプトファイルを分割する方法 [#p9eb6bdf]
&br;
*** スクリプトファイルを分割する [#g2e95ab5]
シナリオの分量が大きくなってくると、1つのスクリプトファイルで書くのが大変になります。
そこで、シナリオの章やシーンごとにスクリプトを分割する方法があります。
init.txt のコピーを作成して、second.txt と名付けてください。
txtフォルダの中に、init.txt のコピーを作成して、second.txt と名付けてください。
init.txt と second.txt の中身をすべて削除し、 次の内容を貼り付け、保存してみてください。
init.txt:
@bg roof.png 1.0
@ch center 001-fun.png 1.0
init.txtの中にいます。
@load second.txt
second.txt:
second.txtに移動しました。
保存したら、Suika2を再起動してゲームを実行してみてください。
保存したら、Suika2のメニューで「リロード」を選んでから、ゲームを実行してみてください。
second.txtに移動できたことがわかるはずです。
@loadは、指定されたスクリプトファイルに移動するためのコマンドです。
ここで気をつけたいこととして、ラベルはスクリプトファイル内でのみ有効ということがあります。ジャンプ前のスクリプトファイルで使っていたラベルは、 ジャンプ後のスクリプトファイルからは使うことができません。逆に言うと、異なるスクリプトファイルで同じ名前のラベルを作成することができます。
&br;
** 10. Suika2で素材ファイルをパッケージにまとめて見えなくする方法 [#u26cb050]
&br;
*** ファイルを1つのパッケージにする [#od5ce116]
ゲームリリース時には、素材ファイルがそのまま見えないように、ファイル群を1つのパッケージにまとめます。
Suika2のメニューの「エクスポート(E)」から、 「Windowsゲームをエクスポートする」を選択します。
すると、Windows用に出力された完成系のフォルダが開きます。配布ファイルには、suika.exe と data01.arc の2点があれば動作します。動画を利用した場合は mov フォルダも必要になります。(動画は現状ではパッケージに入らない仕様であるため)
すると、Windows用に出力された完成形のフォルダが生成され、表示されます。配布ファイルには、suika.exe と data01.arc の2点があれば動作します。動画を利用した場合は mov フォルダも必要になります。(動画は現状ではパッケージに入らない仕様であるため)
&br;
** 11. チュートリアルの最後に [#b73cd7da]
&br;
*** 基本はこれでOK [#c0a3f335]
細かい演出機能はのちのち覚えていくとして、まずはこれでゲームが作れます。
以上でチュートリアルは終わりです。おつかれさまでした。
&br;
*** わからないところがありましたか？ [#hf401af0]
もしチュートリアルの内容でわからないことがあれば、遠慮なく下のチャットで質問してください！
[[https://discord.gg/tv9yKuEG9Q]]
[[https://discord.gg/TCQ4J58F2c]]