sketch

■チュートリアル：キャラクターの立ち画像を作成する

キャラクターは、「キャラクターの作成」を行うことで、ゲーム上で使用できるようになり、「キャラの立ち画像の登録」を行うことで、立ちキャラを表示することができるようになります。このチュートリアルでは、キャラクターの立ち画像を作成し登録する方法を学びます。

キャラクターの作成と、キャラクターの（立ち）の定義は別物です。
立ち定義がなければ、キャラを登場/退場(enter/leave)させることはできませんが、それ以外のキャラに関するコマンドは、キャラクターを作成するだけで、全て利用できるようになります。

このチュートリアルの実行には、optpix ver.1.31 が必要ですが、他のツールを利用して一部手作業で作成することも可能です。

■サンプル素材（シルエット１号と背景１点）

グラフィックエディタで作成した立ち画像を、実際にゲームで使える形にして登録するチュートリアルには、素材が必要です。
自分で用意した画像データがある方はそれをご利用ください。試しに作成手順を実行してみたい方は、サンプル素材F001をダウンロードするのがお手軽です。
サンプル素材のライセンスについては、こちらをご覧ください。

A.シルエット１号用立ち画像データ（サンプル素材Ｆ001）をretouch.infoからダウンロードする
B.背景（800x600 (c)lotus-inc サンプル素材C001）をretouch.infoからダウンロードする

なお、sketchで新規プロジェクトを作成するのが面倒な方は、定義済みのprojectもあります。
C.sketch ver.1.20で作成したdef定義済み新規プロジェクト環境をretouch.infoからダウンロードする

optpix ver.1.31 をお持ちでない方や、ちょっとだけさわってみたいという方のために、作成済みのデータも用意されています。
D.上記Ｃに適用する作成済みデータと defChara.rsdをretouch.infoからダウンロードする。
適用詳細は、上記に含まれているreadme.txtを参照してください。

■チュートリアル本体

このチュートリアルは、サンプルキャラのシルエット１号を利用して、キャラＩＤ４番の画像を登録します。
ついでに、ひとつのシルエット１号画像から、大中小３種類の立ちキャラを作成することにします。具体的な手順は次の通りです。

１．雛形となるプロジェクトの作成
２．サンプル素材（シルエット１号）のダウンロード
３．画像データの配置
４．実際のコンバート前編。ここで大中小のキャラ画像が作られます。
５．実際のコンバート後編。減色（ここで、optpix ver.1.31が使われています）とカットと値の出力。
６．poslog.txtを用いたdefCharaの定義
７．動作確認
８．付録：画像データファイル名の命名規則

自分で作成したキャラデータを利用する場合は、８の画像データファイルの命名規則に従って、あらかじめデータをリネームしておかなければなりません。ダウンロード素材は、最初からこの命名規則に則ったファイル名になっています。

１．雛形となるプロジェクトの作成

新規プロジェクトを作成します。または、retouch.infoからプロジェクトの雛形をダウンロードしてもかまいません。
以降、プロジェクト名は、sampleProject0001とします。ご利用のプロジェクトにあわせて適宜読み替えてください。
作成されたプロジェクトは、左図のようなフォルダ構造を持っています。

２．サンプル素材（シルエット１号）のダウンロード

retouch.infoから、シルエット１号(SampleF001.zip)をダウンロードしてください。

展開すると「シルエット１号」フォルダが作られ、その中に立ちキャラ画像命名規則に従って作られた３２個のpngファイルが格納されています。

３．画像データの配置

ダウンロードしてできた３２個のpngを左図のproject/resource/キャラクター/立ち/original/フォルダにコピーします。
この際、２桁のキャラID+３桁のbodyIDの名前を持ったフォルダを作成し、その下に該当するpngを格納するようにします。

例えば、0004.0006.P.000.000.png は、キャラIDが４で、bodyIDが６のデータです（詳しくは立ちキャラ命名規則を参照してください）ので、04006というフォルダを掘って格納します。

シルエット１号には、ボディが９枚格納されていますので、最終的に掘られるフォルダは左図のようになります。
それぞれのフォルダに格納されているファイルは、上記の規則に沿っています。

例えば、04007/には、0004.0007.* のファイルが、04000/には、0004.0000.*のファイルが格納されています。

４．実際のコンバート前編

前編では、１つのシルエット１号から、大中小３枚の画像を作り出し、中間フォルダに格納します。ユーザーがやるべき事は、project/resource/キャラクター/立ち/cnf/にある、preCnf.txtを編集することと、gyu.exeにパスが通されていなければ、project/resource/キャラクター/立ち/0.preCreateCharacter.batを編集するし、実行することです。

まず、preCnf.txtを編集しましょう。preCnf.txtは、左図の位置にあります。

preCnf.txtをテキストエディタで開いてください。なお、修正後のpreCnf.txtはこちらにあります。
#block ～#end blockまでが、一つの処理ブロックになります。デフォルトで添付されているpreCnf.txtには、このブロックが３つあります。これは、大中小の３パターンのデータを作成するためです。もし100%から10%まで、10%刻みの大きさでボディを作成したいときは、このブロックが１０個になるでしょう。
それでは、１つのブロックの詳細を解説していきましょう。

コマンドは、「コマンド[TAB]パラメータ」の形をしています。また、セミコロン(;)で始まる行はコメントです。
#block xxxx は、ブロックの開始を表します。xxxxの部分は、enable か disable になり、enableだとそのブロック全体を有効に、disableだと無効にします。 #end block は、処理ブロックの終端を意味します。

M は、gyu.exeにこのブロックのモードを教えます。301は拡大縮小コマンドです。
S0 と S1 は、入力と出力の画像データのフォーマットを指定します。S0が入力フォーマット、S1が主力フォーマットで、PNGとBMPが指定できます。
D は、出力先フォルダを指定します。相対指定の場合カレントは、sampleProject0001/resource/キャラクター/立ち/ になります。存在しないフォルダを指定した場合、自動的に作成されます。
S は、ソースファイルがあるフォルダを指定します。ここで指定されたフォルダの下にある、S0で指定されたフォーマットのファイルがすべて処理対象になります。
EXEC param は、それまで指定したパラメータでMode301（拡大縮小）を実行します。paramは、拡大縮小率（％）で整数で指定してください。

どの程度の大きさにするのかは、あらかじめ決めておかなければなりません。
グラフィックエディタ上で、適当な整数パーセンテージに拡大縮小して表示するＹ座標補正値（左図のＨ）と、拡大縮小率（左図のＰ）を確認しておきましょう。キャラを作成するために必要な座標等のパラメータはこの二つだけです。

Ｙ座標補正値Ｈは、表示画面の上端を０とし、画面下を正の方向とします。つまり、画面の上にはみ出すと、はみ出したピクセル数を符号反転したものが補正値になります。-105なら、105ピクセル上にはみ出しているわけです。

今、シルエット１号の大中小のパーセントは、 100%, 50%, 40% とし、それぞれのＹ座標補正値Ｈは、-105, -20, +60 とします。
（Ｙ座標補正値は後編で使用します）この値を元に書き直したのが、左図になります。
これは「小」用の部分を抜き出したもので、EXECのパラメータが40になったことと、04000～04008までの各フォルダをすべて処理しただけです。

のこりふたつのブロックもこれに準じる形で記述します。
単にEXECのパラメータが、中で、50に、大で100になるだけです。

ここまでできたら、後は左図の位置にある 0.pre.createCharacter.batを実行するだけ‥‥なのですが、このバッチファイルを実行するためには、gyu.exeがパスの通ったフォルダに存在していなければなりません。
そうでない環境では、
１． gyu.exeをパスの通ったフォルダにコピーするか、
２．sampleProject0001/resource/キャラクター/立ち/にコピーするか、
３．0.pre.createCharacter.batをテキストエディタで開いて、gyuの部分をフルパスで指定するか
のいずれかを実行してください。

gyu.exeは、sketchフルセット版に含まれています。場所は、sketch.exeのあるフォルダ/tools/フォルダです。
公開されているsketchに添付されているgyu.exeはフリーエディションです。

0.pre.createCharacter.batを実行すると、コマンドプロンプトが開いて、縮小作業を行います。
しばらくたって、作業が終了すると、左図のようなフォルダ構造になり、big, middle, small フォルダにそれぞれ、大中小の画像データが格納されています。この段階ではたんにサイズを変更した画像データにすぎませんが、前編はこれで終了です。

後編は、このデータを利用して、適切なカットや座標の算出を自動で行います。

５．実際のコンバート後編（ここで、optpix ver.1.31が使われています）

次に、postCnf.txtを編集しましょう。postCnf.txtは、左図の位置にあります。
このファイルには、３つのMode300のブロックと、１つのMode110のブロックが含まれていますが、まずはMode300のブロックから解説しましょう（左下図参照）

M はモードの指定です。300はキャラ画像作成モードです。
P0は、ゲーム画面の高さです。デフォルトでは、800x600のビューを想定していますので600になっています。
S0は、マスクデータ用のパレットデータ指定です。maskPalette.actは、sketch.exeのフォルダ/data/に含まれていますが、プロジェクト作成時に、projectName/ide/tools/にもコピーされます。今回の指定、..\..\..\ide\tools\maskPalette.actはそれを利用しています。
フルパスで指定すると書いてありますが、実は相対パスも利用できます。

maskPalette.actは、標準の１７色減色用のパレットです。キャラなのにグラデーションの強いマスクを持っている場合（幽霊で足が徐々に消えているとか。半透明の服の装飾が重なっているとか）で、透明度のマッハバンドが気になる場合は、代わりに、grayscale.actを使用すると、通常の256色マスクになります。grayscale.actは、sketch.exeのフォルダ/data/に含まれています。

S1は入力画像データのフォーマットで、PNGまたはBMPです。
Dは、出力フォルダを作成するフォルダで、このフォルダ以下に、8/, 24/, game/ の３つのワークフォルダが自動的に作られます。
Sは、ソース画像が格納されているフォルダで、このフォルダにある、S1で指定したフォーマットの画像すべてが処理の対象になります。
このモードのEXECは、４つのパラメータを持っており、凡例は、EXEC cid inBid outBid correctHです。
cidはキャラクターID、inBidは入力側のbodyID、outBidは出力側のbodyID、correctHは、前編で登場した各画像のＹ座標補正値Ｈです。

inBidとoutBidに分かれているのは、例えば同じ charaID-4 のbodyID-0 のデータから、大中小の３つのボディを作るため、必ずしも入力に利用する画像データのbodyIDと、実際に出力するデータのbodyIDが一致するとは限らないためです。
シルエット１号はボディが９つあるので、大は20番台、中は10番台、小は０番台を使用することにしましょう。

以上のことをふまえて手を加えた、修正後のpostCnf.txtはこちらにあります。ダウンロードして比較してみればすぐわかると思います。

ここまできたら、後は、右図の1.post.createCharacter.batを実行するだけですが、gyu.exeの問題は前編と同様です。pre.createCharacter.batが実行できるなら問題なく実行できます。
そうそう、batファイルを実行する前に、optpix ver.1.13を起動しておいてください。減色時にbatが勝手に操作します。
なお、外部からの操作を想定していないoptpixを自動操作するために入力メッセージを送信していますので、処理が終了するまではコンピューターを操作しないでください。誤動作の元になります。

すべての実行が終了すると、左図のようにworkの下に、8,24,gameフォルダが追加されます。
実際にゲームで使用する画像は、gameフォルダの下に入っています。なお、上記postCnf.txtでは、モード110のブロックが、このgameフォルダの下にあるファイルを利用してgyuを作成し、実際のgameフォルダ以下に適切に配置するため、何もする必要がありません。

1.post.createCharacter.bat が実行されると、左図の位置にposlog.txtが作られます。
このファイルは、作成中に切り出した表情や、各種アニメーションの座標や、差分取得における最小矩形の位置等が含まれているテキストファイルで、このファイルを作成するために自動実行させるといっても過言ではありません。
sketchで立ちキャラ定義をする際にそのまま利用しますので、決して削除しないよう保存してください。

６．poslog.txtを用いたdefCharaの定義

	sketchで、sampleProject0001.rpjを開いたら、定義/defCharaノードをダブルクリックして編集ビューを開きます。そして、ここを参考にして、標準表記名「シルエット１号」　ボディ数３０でシルエット１号を作成します。途中キャラクターの新規登録ダイアログでは、 CharacterIDを手動設定にして、CharacterIDには４を指定してください。
	登録が終了すると左図のようになります。次にこの３行目に、５で作成されたposlog.txtをドラッグ＆ドロップしてください。
	すると左図のようになりますのでセーブしてください。これでキャラの立ち画像登録は終了です。目パチも口パクも表情替えも、ボディアニメーションも、その座標や領域を全く気にする必要がありません。

７．動作確認

	６まで終了したら、キャラクターが正常に登録されているかどうかを確かめましょう。まず、sketchで第１章/startノードをダブルクリックして、演出ビューを開きます。
	背景がないと寂しいので、サンプル素材C001（背景）をダウンロードして、展開し、できあがったC001_001.pngをstartの演出ビューにドラッグ＆ドロップします。
	すると画像データの作成ダイアログが開きますので、ファイルIDに300を指定して「出力」を押してください。初めての登録なら、フォルダの作成確認が表示されますが「はい」を押して進んでください。これでC001_001.pngが300番画像としてコンバート＆追加されました。
	startの演出ビューのindex-00002の空欄で右クリックをすると、コマンドパレットが開きますので、「イベント演出」-「描画」-「イベントの表示」を選択して実行を押してください（イベントの表示をダブルクリックしてもＯＫです）
	フルカラーへの描画ダイアログが開きますので、CGID指定に、先の300を入力してOKを押してください。
↓	こんな感じになって描画コマンドが入力されました。詰まっているとなんとなくいやなので、index-00003のシーン移動コマンドで、iキーを押してください。カーソルの位置に空行が挿入されます。適当に５回くらい押して空行をいれておきましょう。
	ここでメッセージを表示して、キー待ちを行います（そうしないと実行してもすぐ終了してしまうから）挿入したい行を右クリックして（例えばindex-00003）コマンドパレットを表示し、「メッセージ」-「メッセージの入力」を実行してください。
	メッセージの入力ダイアログが開くので、発言者からシルエット１号（登録されているはずです）を選び、適当にメッセージを入力して、OKを押してください。
	するとこうなります。
	準備はできました！メッセージの次の行を右クリックして、コマンドパネルを開き、「キャラ演出」-「個人処理」-「登場」を実行します。
	すると、立ちキャラ表示ダイアログが開きますので、キャラから、シルエット１号を選択してください。
	そして参照ボタンを押すと、登録されたボディとフェースの一覧が開きますので、表示したい組み合わせを選択してください。今回は、ボディID10（通常立ちの中サイズ）を選びましょう。表情替えは存在しないので、face選択には１枚しか表示されていないはずです。そこをクリックしてください。
	するとこうなって、立ちキャラが登場するはずです。
	これだと、立ちキャラが登場した瞬間にゲームが終了してしまいますから、index-00003のメッセージ表示を選択して、CTRL+Cでコピーし、index-0005を選択して、CTRL+Vを入力しましょう。00003が00005にコピーされたはずです。ついでに、後３回くらいCTRL+Vを押すと、左図のようになります。
	では実行してみましょう。初めて実行するときは、「新規プロジェクトの作成」チュートリアルの「５．実行してみる‥‥の前に」を参照して、RLDの一括出力を行ってください。実行の仕方は、同チュートリアルの「６．実行してみる」と同様、編集ビューのメニューから、「(D)ebug」-「デバッグ実行(D)」を実行するだけです。キャラが表示された後、何度かクリックしていると終了するはずです。
	ついでに標準フレームをつけましょう。 index- 00002を選択して、右クリックしてください。
	コマンドパレットが開いたら、「マクロ/M.Bullet」-「glb.初期化」-「RSDの標準的な先頭」を実行してください。
	実行した瞬間に、選択したマジックブリットがカーソル位置に挿入されますので、セーブ(ALT+F -> S)してください。
	実行すると、標準フレームが表示されるはずです。
	シルエット１号には、ボディID５番にアニメーションのサンプルが含まれています。それを表示してみましょう。まず、キャラ表示コマンドの後ろに、メッセージコマンドをひとつ挟んだ位置に、キャラ登場コマンドを挿入します。キャラはシルエット１号。ボディＩＤは１５を選択してください。すると、左図のようになります。

コマンドパレットから入力してもかまいませんが、すでに入力されている同じキャラの登場コマンドを、CTRL+C/CTRL+Vでコピペして修正した方が快適です。

	実行すると、標準ポーズが表示された後、キャラがアニメーションしながら横を向きます。その際、標準ポーズから右へキャラがずれてみっともありません。これは、キャラ作成時の自動切り出しによって、画像の不要な部分がすべて捨てられることと、キャラ表示はその画像のセンターを指定位置にあわせることで行われるためです。 sketchでは、この問題に対処するためにキャラ位置の補正が用意されています。sketchにおけるキャラ位置補正には３種類ありますが、こういった基本位置に関係する補正は（リンク先の）１番目にある「定義時の補正」を利用します。
	定義/defCharaノードを編集ビューで開いて、index-00017あたりにある、シルエット１号のボディID15の定義をダブルクリックしてプロパティを開いてください。表示位置補正を利用するにチェックを入れて、補正座標 -27,0 を定義します。これでデフォルト位置よりも左に27ピクセルずれて表示されるようになります。
	もう一度、startノードに戻って、実行を行ってみましょう。今度はほとんどずれないことが確認できるはずです。しかし、その代わりポーズが変わる瞬間に、なんだかチカっと光るような気がします。これは、ポーズが変化する場合キャラのクロスフェードが行われるのですが、同じポーズでクロスフェードが行われた場合、合成後の透明度が一時的に変化することによって発生しています。 sketchではこの問題を回避するために、「ボディのグループ化」が用意されています。
	先ほどと同様、定義/defCharaノードを開いて、シルエット１号のボディID15定義のプロパティを開いてください。グループIDを利用するにチェックを入れ、１を指定してOKを押してください。
	同様に、１５番とグループ化したい１０番もプロパティを開いてグループID1を定義しておきましょう。

グループIDは１以上の正の整数で、ボディID全体で一意に識別可能で32bit整数の範囲にある値ならなんでもかまいません。同一のグループIDを持ったボディを連続で表示する際、クロスフェード等のエフェクトを利用しなくなります。

なお、今回は10->15のためにこの処理を施しましたが、15->10でも同様にクロスフェードを利用しなくなるため、今回の処理がふさわしいかどうかは演出によります。

実行して、今度はうまくつながっていることを確認してください。

ここから先は上級です。
ボディアニメーションを定義したとき、retouchは自動的に各パターンを順番に表示するシーケンスを割り振ります。そのため、上記のボディ15は、何もしなくても動作したわけですが、このシーケンスを変更したいことがあります。例えばずっと動かし続けたい場合等ですね。この場合、シーケンスを直接定義することで対応します。なお、シーケンスの文法はこちらを参照してください。

defCharノードの、シルエット１号bodyID15の定義のプロパティを開いてください。
左図で""に囲まれた選択している部分がこのアニメーションのシーケンスを定義しています。この部分をCTRL+Cでコピーして、テキストエディタ等へ張り付け、A.B.C.D.E.F.G.H.0[....]を、A.B.C.D.E.F.G.H.G.F.E.D.C.B.A.5[....] と変更してみましょう。簡単に想像できると思いますが、これは横向いて元に戻してを１秒毎に繰り返すシーケンスです。

この定義を行った、ボディID15の定義部分をMagic-Bulletにしたものを、ここ(retouch.info内)においておきます。これをダウンロードして、編集ビューへドロップすると、ドロップした位置に修正済みのコマンドが挿入されます。すでに定義されている、１５番ボディの定義行は、index部分をダブルクリックして無効化しておきましょう。

セーブして start ノードを実行すると、確かに上記の動作をしていることが確認できるはずです。

今回の実行で修正したノードのＲＳＤをアーカイブしたものをアップしておきます。
これをダウンロードして展開してできたRSDファイルを、sampleProject0001/ide/data/rsd/ にコピー（上書き）することで、最終状態にする事ができます。

８．付録：画像データファイル名の命名規則

以上のように、sketchでは、縮小率とＹ座標補正値Ｈさえ用意すれば、残りの面倒な動作や表示座標の取得等はすべて自動で計算してくれます。
ただしそのためには、画像データに正しいファイル名をつけて、正しいフォルダにセットする必要があります。
ファイル名の付け方のルールの詳細は、「キャラ作成用画像の命名規則」を参照してください。

	1.新規プロジェクトの作成
	2.プロジェクトの設定
	3.キャラクターを作成する
	4.立ちキャラの画像定義
	5.音声再生を有効にする
	6.デバッグ
	7.製品を作成する（リリース）

	演出の再利用
	メッセージにルビを振る
	環境音の作成
	タイトルメニューの作成
	ＣＧモードの作成

	→チュートリアル一覧
	→GLOSSARY一覧
	→重要な情報一覧

	イベント画像の表示
	ズームを利用した表示