記事更新 2009/07/17

---

全記事はここにまとめて
【 サイトマップ 】

---

さてさて、本日は

PSP Revolution のスキン（skin）、その作成方法を書きましょう。

とはいっても、単なるコツに留まります。

DWI と同じで、画像編集も、言葉で説明するようなものではないですからねｗ

では、記事ここから。

---

---

■　準備

管理人は、PSP Revoluton v0.4 におけるスキン作りのコツについて述べています。

【必要なもの】

?デフォルトのスキン(のフォルダ)
・・・各自で、オリジナルスキン作成の参考にします。
また、出来たオリジナル画像をデフォルトの画像とすり替えていきます。

?画像を編集・作成・png形式で保存可能なツール
・・・これももちろん必要です。

?上記のツールをある程度使いこなせる技術
・・・言わずもがなです。

?根性
・・・おそらく一番欠けているものです。


さて、PSP Revolution v0.4 に最初から入っている、Defaultのスキンのフォルダを
コピーしてデスクトップにでも置いてから、以下読み進めていってください。

---

■　はじめに

作成難度は決して高くはありません。
ですが、普段から画像処理作業に慣れている方でないと、いろいろとつまづくかな、とは思います。

しかし！
全ては愛と根性と時間で解決する話。頑張って下さい。

あと、私自身一度しか作ったことがない（笑）ので、いろいろ不適切な部分があるでしょうが・・・
そこはご了承ください。あくまで、参考程度ということ。

また、この文章は一度自分で試行錯誤した後でないと意味が分からないかと思います。
失敗すれば、デフォルトに戻せばいいというだけですので、
まずはデフォルトの画像を真似て適当にいじってみてください。

というか、一度自分で試行錯誤してみる・・・の過程をきちんと経た人には、この記事はそんなに必要ないはずなんですよ。もう一度言いますが、この記事はそういった方のための参考に過ぎません。

---

■　概要・・・何をするのか

デフォルトの画像を真似てオリジナルの画像を作り、
そのデフォルト画像に上書きする。これが全てです。

すべての画像を変えられるわけではないので、半分以上はデフォルトのままということ。

---

■　画像編集ソフトについて

フォトレタッチツール？ベクタードローツール？
呼称はなんなのかな・・・私はその点に関して全くの素人なのでよく分かりませんが、
上記の通り画像を編集するソフトが何かしら必要です。

画像をいじれるなら何でもいいです（笑）自分の使いやすいもので。
ポイントとしては、

■半透明化の処理が出来る（必須）
■透過処理が出来る（必須）
■png形式で保存できる(必須)
■カーソルをあわせているところのX.Y座標を表示してくれる（任意）
■グリッド線を表示してくれる(任意)

くらいでしょうか。・・・大抵のソフトは当たり前に可能だと思いますが・・・？

ちなみに私は、pixia というソフトを利用しました。
Gimpなどを使いこなせるようなら、相当凝ったスキンが作れるはずですｗ
あ、pixiaでも・・・というかどんなソフトでも、凝ったスキンは作れますよ。

技術と愛と時間の問題ですｗ
私にはどうやら、技術と時間が不足していたようで(ﾉ∀`)

なお、各ツールの使い方は決して私に聞かないでください。
そのツールの公式ページってものがあるでしょうｗ

---

■　実際に画像を作っていく際に

まず、全てPNG形式。違う拡張子で動作するかは未確認。

また、パーツ画像の背景は透過させる。
パーツ画像の説明は以下。

そして、各画像のサイズは同じにする。

この三つが基本事項。例外あり。後で言います。

差し替える画像が完成したら、元の画像とファイル名を一致させ、上書きします。
フォルダ別に作っていきましょう。

★　この記事ではスキンに含まれる画像群を二種類に分けています。

?背景画像と、
?背景画像の上に表示され、metrics.ini(構成設定)をいじって
表示される場所を変えることのできるパーツ画像。

---

■　以下の説明文の構成

「Default」のスキンのフォルダ別に画像を見ていきます。

各デフォルト画像とオリジナル画像を並べ、作り方の参考にする、ということ。

---

?　Arrows フォルダの画像

パーツ画像です。

Default - graphics - Arrows の中にあります。

【デフォルト画像例】


ゲーム中に流れてくる矢印マークの画像ですね。
自作は難しいです。諦めてデフォルト画像をそのまま使いましょう。

---

?　Grades フォルダの画像

パーツ画像です。

Default - graphics - Grades の中にあります。
これは自作可能です。楽に作れますので、是非どうぞ。

【デフォルト画像例】

【作成例】

背景色は透過させましょう。
また、画像サイズは同じにしましょう。

これは、Score_Screen_Empty.pngの上に表示されます。

【表示例】


このように、リザルト画面に表示されます。

ちなみに、上の画像は悪い例。暗めの背景に暗めのグレード画像が重なって、見えにくい。

背景色が暗い場合、グレード画像の文字は白で縁取るなどの工夫を。
逆に背景色が明るい場合は、グレード画像に影をつけるなどの工夫を。デフォルト画像のようにね。

---

?　Hit_Text フォルダの画像

パーツ画像です。

Default - graphics - Hit_Text の中にあります。

【デフォルト画像】


私は自作していませんが、アドバイスはできます。

・各画像のサイズは真似る
・背景は透過させる
・文字は中央に置く

以上。
各文字を、違う言葉に置き換えてみても面白そうです。以下のように。

【デフォルト画像】


【作成例】


結局自作しました。少し文字が小さいですねｗ

例えばの話ですが、「Boo!」を「この馬鹿野郎！」にするなどしても面白そうです。
結局は、あなたの発想次第でいくらでも良くなると。

---

?　Menu フォルダの画像

Default - graphics - Menu の中です。

最初の山場ですね。

★　まずは、背景画像二つについて説明します。

【デフォルト画像　Main_Menu_Bkground_01】


メニュー画面の背景。自由に作れます。

【デフォルト画像　Main_Menu_Bkground_02】


Main_Menu_Bkground_01が透過されていた場合、後ろに表示される背景画像です。
右から左にスクロールされながら表示されます。
デフォルト画像の場合見えませんが、雲が流れていくように表示されるわけですね。

★　つぎは、パーツ画像二つについてです。

【デフォルト画像　Main_Menu_Text_wipe】


見えませんねｗｗドラッグして反転させて見てください。
この画像は放っておきましょう。自作は出来ますが面倒です。
ちなみに、メニュー画面でカーソルをスクロールした時、
ピコッ！ってなるエフェクトの画像です(意味不)

【デフォルト画像　Main_Menu_Text】



右半分にも文字があります。ドラッグして反転させて見て下さい。
背景画像Main_Menu_Bkground_01の上に表示されるパーツ画像です。
表示される位置は、metrics.ini(構成設定) をいじって変更できます。

この画像の作製は注意が必要です。というのも、
同じ画像の中でも、部分によって別々に認識さる画像だからです。

私のスキンとデフォルトを比べてみると・・・
（分かりやすいように赤いラインを引いています）


デフォルト・・・180*80

自作スキン・・・180*80

どちらの画像も、
各文字列を 90*20 のブロックに分けて配置しているでしょう？
こういう風に、作るということ。

ちなみに各画像の右側の白文字は、左の文字が発光するエフェクトに用いられます。

【まとめ　表示例】

---

あせらない、あせらない。
ひとやすm)`д)･ﾟ:｡

この記事は執筆途中です。

---

■　その他

【補足?】　作りかたがよく分からないものについて

デフォルトのままで放っておく。これに越したことはないです(ﾉ∀`)

伸びる矢印などですｗ

【補足?】　編集に慣れてきたあなたへ「必ずしも真似る必要はない」

いままでの文章を全否定しますが（笑

もちろん一部のパーツ画像はほぼそっくりに作らねばいけませんが、

大体のパーツ画像はアイデア次第で大きく変更できます。

例えば・・・リザルト画面の数字の画像を漢字（壱、弐、参・・・）にするとか、

ヒット時の 「Marvelous!」 を 「Fantastic!」 にするとか。

難易度の足マークだって、足である必要なんて微塵もありません。

---

■　構成設定 「metrics.ini」 の意味するところ

metrics.ini をいじると、各パーツ画像の位置を変更したりと、
様々な設定を変更できます。出来ないものも多くあります。

※　まず、なんとなくデフォルトのスキンのフォルダの
metrics.ini と画像群を見比べてみてください。

以下全て推測。正確な情報を保障するものではありません。

なお、デフォルトとは異なり自作スキンでの変更された値です。

デフォルトの値と比べてみると、色々なことに気付くことでしょう。是非やってみて。

なお、PSPの画面の一番左上が [X座標.Y座標] = [0.0] です。

つまり、[X.Y] = [480.272] がPSP画面の一番右下、ということですね。

･･･････････････・・・・・・・・・・・・・・・・

[Main Menu]
メインメニューでの設定。

Main_Menu_Text_Start_X_Y=339,150
メインメニューでの「start options credit exit」の画像の表示位置。
なお、画像の一番左上が、上記の座標位置にあたる。
以下、特に言及しない限りは、同様に画像左上が座標位置。
Main_Menu_Text_Swipe_Frames_Per_Row=5
Main_Menu_Text_Swipe_Number_Of_Frames=10

[Song Select]
曲選択画面での設定。

Feet_Start_X_Y=313,18
難易度（足マーク）画像の表示位置。
Max_Feet_To_Show=15
表示させる足マークの最大数。デフォルトは10。
Banner_Cover_X_Y=20,20
バナーのフレーム画像の表示位置。しかしながらバナー自体の場所は
移動不可なので、高度に応用する場合を除き変更しないでよい。
Song_And_Pack_List_Start_X_Y=27,151
曲リストの表示の開始地点。曲リストの一番左上が上記の座標位置にあたる。
Song_And_Pack_List_End_X=200
曲リストの横幅の最大値。
上記X座標以降の文字は表示されない。
Song_And_Pack_Number_Of_Lines=8
曲リストで、何曲表示させるか。
More_Text_Top_X_Y=75,140
上記“何曲表示させるか”の数を超えた曲数がある場合、
「（more...）」の表記が出るが、その表示位置（上側）。何故か設定座標とズレるため注意。
More_Text_Bottom_X_Y=75,243
同表示位置（下側）。

[Main Game]
ゲームプレイ画面の設定。

Hold_To_Exit_Numbers_In_Image_X_Start=330
//Size Ratio means the animaiton will enlarge the Hit_text to 1.xx times the original size over animation
Marvelous_Animation_Size_Ratio=1.12
ゲーム中にMarvelous、Perfect、Greatの良いヒットを出した時に、
その文字が拡大するアニメーションが起こるが、それを元画像の何倍拡大させるか。
1.xx とのことなので、恐らく最大値は1.99倍。
Perfect_Animation_Size_Ratio=1.12
同上。
Great_Animation_Size_Ratio=1.06
同上。

[Score Screen]
リザルト画面での設定。

Song_Title_Center_X=338
不明。変更してもバナーの位置変わらず。
Song_Title_Y=38
同上。
Song_Title_Max_Display_Width=284
不明。バナーの表示横幅か。
Song_Difficulty_X_Y=180,142
曲難易度（medium hard challange 等）の位置。
Center_Song_Difficulty_On_Its_X=Yes
曲難易度の表示にはレイアウト崩れの危険がある。
これは、hard、challange等で文字の長さが変わるため。
この設定を「Yes」にすると、他の表示のように一番左上を起点にするのではなく、
画像の中央を上記座標 （この場合はSong_Difficulty_X_Y） の位置にあてる。
Mods_List_X_Y=114,161
「x1.5 dizzy dark」などの表記の位置。
Center_Mods_List_On_Its_X=Yes
Center_Song_Difficulty_On_Its_Xと同じように、画像の中央を
座標の位置にあてるかどうか。
Combo_Display_X_Y=160,127
マックスコンボ表記の位置。画像左上が座標位置にあたる。
Score_Display_X_Y=102,109
スコア表記の位置。
Marvelous_Count_X_Y=424,116
Marvelousのヒット数表記の位置。以下六つも同じ。
Perfect_Count_X_Y=263,137
Great_Count_X_Y=424,157
Good_Count_X_Y=263,177
Boo_Count_X_Y=424,197
Misses_Count_X_Y=263,217
OK_Count_X_Y=424,239

---

■　構成設定と画像を照らし合わせてみる

座標、実際に見てみないとわからないですよね。

「各画像の一番左上が、上記の座標位置にあたる」っていう言葉も。

そこで、曲選択画面での、
バナーフレーム等の画像と、構成設定の関係を見てみましょう。

[Song Select]
曲選択画面での設定。

■ A座標 Feet_Start_X_Y=313,18
難易度（足マーク）画像の表示位置。
■ B Max_Feet_To_Show=15
表示させる足マークの最大数。デフォルトは10。
■ C座標 Banner_Cover_X_Y=20,20
バナーのフレーム画像の表示位置。しかしながらバナー自体の場所は
移動不可なので、高度に応用する場合を除き変更しないでよい。
■ D座標 Song_And_Pack_List_Start_X_Y=27,151
曲リストの表示の開始地点。曲リストの一番左上が上記の座標位置にあたる。
■ E座標 Song_And_Pack_List_End_X=200
曲リストの横幅の最大値。
上記X座標以降の文字は表示されない。
■ F Song_And_Pack_Number_Of_Lines=8
曲リストで、何曲表示させるか。
■ G座標 More_Text_Top_X_Y=75,140
上記“何曲表示させるか”の数を超えた曲数がある場合、
「（more...）」の表記が出るが、その表示位置（上側）。何故か設定座標とズレるため注意。
■ H座標 More_Text_Bottom_X_Y=75,243
同表示位置（下側）。



・・・何か、もやもやと感覚が掴めてきましたでしょうか・・・？

まあ、こういうのは実際に自分でいじってみて確認しないと意味がないです。

---

■　サウンドについて

sounds のフォルダを開いてください。
四つの音源が入っていますね。

□fail.wav
クリア失敗した時に流れる短い効果音
□menu_scroll.wav
カーソルスクロール時に流れる短い効果音
□menu_select.wav
メニューで決定ボタンを押したときに流れる短い効果音
□menu.mp3
メニュー画面で流れる長いBGM

これは、自作は難しいですね・・・ｗ
フリーのサウンド素材屋さんを検索し、借りてきましょう。

その後、画像と同じように、デフォルトの音源に上書きしてすり替えます。

この手のサイト様には、絶対に迷惑をかけないこと！

---

ふう・・・疲れました。

記事作成にかかった時間は、膨大ですｗ

なかなか見つからないスキン作成方法の記事を探している方の、

少しでも参考になれば幸いです。

ではでは(ﾉ∀`)ﾉｼ

---

?関連記事?

【PSP Revolution skin】 スキン配布?　?ストライクウィッチーズ?

PSP Revolution v0.4 導入・解説　?PSPで楽しむ定番の音ゲー?

【PSP Revolution v0.4】 DWIを作ってみる　?作成手順＆方法・おまけ配布?

---

Name
Mail
Web
Comment
Pass
Secret	管理者にだけ表示を許可する