2012年08月04日

とても解り辛い?CLaunchスキン作成手順 その1

CLaunchスキンの作成方法って、画像を用意したら後はxmlファイルの一部書き換えだけでいいんだよねぇ?とか思ってる訳ですが、久々に作ろうとか考えると案外何処をどう変更したらいいんだっけ?と忘れてる事が多々。
といっても公式のxmlファイル仕様書見れば大抵の事は何とかなる訳なのですが・・・

けどその公式のが(あくまで個人的に)見辛いので『誰かCLaunchスキンの作り方まとめてー』とかtwitterでつぶやいたら・・・
『言いだしっぺの法則』とか返された罠w

って事でまとめてみるよ!!!(をい

ということでCLaunchスキン作成手順となります。
あくまで私個人が判る範囲のテキトーな説明となりますのでコレを見たからって判るかどうかは不明です本気で。
それでもよろしければどうぞってことで。

ぁ〜実はこの記事UPするまでの間に記事内容6日分位既に纏めてあった訳なのですが、一部記事が書いてる途中で公開されてしまっていた罠。
現在そっちのほうは非表示としていますが、とても幸先悪いスタートですな(苦笑)



手順その1では、スキンとして表示させるメインウインドウやフレーム画像について軽く触れている程度です。
本格的にxmlファイルを弄っていくのは次回以降となります。


スキンの作り方としましては下記のような作業をしていく事となります。
具体的には後ほど説明していきますが大まかにこのような作業があります。
・メインで表示されるウインドウ画面の画像作成
・メニュー画面で表示されるウインドウ画面の画像作成
・タブやボタン等の画像の作成
・skin.xmlファイルの数値・文字列の一部書き換え

なお、今回の説明ではCLaunchの公式HPにありますsample3のスキンを基に説明・作成していきます。



スキン作成の為に用意するものは下記となります。

・アルファチャンネルの作成が可能な画像編集ソフト
・xmlファイルを開く事が出来るテキストエディタ
・スキン作成する為のやる気(をい)

画像編集ソフトですが、表示用のウインドウやボタンの画像を作成する為に用います。
フリーのものでもpixiaとかGIMPとかありますので自分で使い勝手がよろしそうなもの、もしくは使っているものを用意して下さい。
GIMPはフリーソフトですが機能が充実しているのでお勧めなのですが、機能が多すぎて単純な画像加工だけには向かなかったりする気がしないでもなかったり?
使い慣れるとそれこそイラストの切り抜き加工とかも容易に出来るようになったりするのですけどね。
無論、シェアソフト(Photoshop等)でも何ら問題はありません当たり前と言えば当たり前ですが。
Photoshopは使い慣れると結構色々出来てお勧めなのですが・・・いかんせんお値段がね。
社会人でもアカデミック版が買える方法ってのはある事はありますがソレでも一般的にはお勧めし辛いのが難点と言えば難点か。

xmlファイルの内容を書き換える為のテキストエディタについてですが、windows標準のメモ帳でも開けたり書き換える事が出来たりします。
ただ多分ですがメモ帳でどうこうやるよりはフリーのものでもいいのでテキストエディタでやる方が楽です色々と。
因みに私個人が使用しているテキストエディタは秀丸なのですが、コレはシェアウェアソフトとなります。
フリーのソフトではサクラエディタを使って、Ctrl+4でタイプ別設定一覧を表示してHTMLあたりを選択すればとりあえず見やすいかと思います。
ついでにCtrl+5でタイプ別設定を表示してファイル拡張子の所の最後に ,xml と追記しておけば次回開いた際も同じよう表示されます。
・・・といっても結局は自分の使い勝手がいいテキストエディタでいいかと。それこそメモ帳でもOK。



これより本格的にスキンの作成手順の説明を行っていきます。



メインで表示されるウインドウ画面の説明から。

window.bmp

sample3のスキンのメインで表示されるウインドウ画面の画像は"window.bmp"となっています。
この画像ですが、ビットマップ画像にアルファチャンネルを指定する事により画像の透過場所を指定しています。
具体的にアルファチャンネルって何ですか?という質問は取りあえず無視しまして・・・

cl_001.jpg
※画像のサイズを4倍にしています

上の画像で言いますと色が白い部分が実際にスキン表示させる際に不透過な部分、黒くなるほど画像が透過されて表示される事となります。

といってもぶっちゃけた話、自分がビットマップでアルファチャンネルを指定するのが面倒くさいという理由だけ(あと萌えスキン作る際には透過pngのが使い勝手いいという理由)で基本的には今後自分が画像作成する際にはpng画像にて透過率を指定した後に出力・画像の指定していく事とします。
pngの透過部分についてはCLaunchスキンを表示させる際にそのままの透過設定で表示されます。

これより具体的にメインで表示されるウインドウ画面の説明をしていきます。

都合、sample3のwindow.bmp画像では説明し辛いので似たような画像を作ってみました。
完全に一緒という訳ではありませんが似たようなものを(をいをい)

cl_002.jpg

この画像の縦・横を引き伸ばしてスキンのウインドウ画面の表示領域の外枠を表示させる事となります。
ウインドウ画面の内側(タブ・アイコンボタンが表示される領域)についてはsample3では別画像の

background.bmp

background.bmpという画像にて表示されています。
また、このbackground.bmpの画像もビットマップ画像にアルファチャンネル指定がされています。
この画像に対しても私個人はpng画像で透過率を指定した後に出力・画像の指定をしていきます。

で、具体的にそれらの画像がどのようにスキンとして表示されるかといいますと
cl_003.jpg

このようにウインドウの外枠の画像の上下左右が引き伸ばされ、それに準じて内側の画像が拡大または縮小されて表示される事となります。
(タイル状に敷き詰めて表示する方法もあります)
CLaunchスキンではこのようにしてスキンのサイズの変更がされる事となります。

スキンの作成方法としましては、上画像のように上下左右の外枠と内側に表示される画像も一緒に出力した状態でskin.xmlファイルの数値・文字列を指定することによりスキンの作成・表示をする方法の他に

cl_004.jpg

このように上・下・左・右の外枠をそれぞれ別個に用意をした状態に中央のスキン内側に表示される画像をまた別個に用意をしてskin.xmlファイルの数値・文字列を指定する事によりそれぞれを表示させる方法があります。
このあたりはどちらがいいかと言われれば・・・各自が作りやすい方を選んであげればいいんじゃないかな?とか。
ただそれぞれskin.xmlファイルにて指定する数値・文字列が変わりますのでそれも踏まえた上で。
このあたりはまた後ほど説明していきます。

上記を踏まえ、メインで表示するウインドウ画面の画像を作成していきます。
今回は説明用に2パターン作ってみたいと思います。

sample.jpg

あーまぁ私のところのサイトなのでいつも通り萌えスキン基準での説明となります事をご了承ください。
と言ってもやる事自体はNot萌えスキンでも全く同じなのですけどね。

とりあえず画像のイラストと外枠は不透明、他半透明になってる感じのものを適当に作成してみました。
(実際スキンとして表示する際には後ろの英文は表示されません)
画像加工につきましては・・・うん自分で頑張って下さい流石にそこまで説明出来ません。

因みに今回の素材につきましては、部屋のその辺に転がっていた(をい)WESTSIDEの「お楽しみCD」に入っていた萌えキャラ素材です。
絵師はみそしさんとなります。

説明用にウインドウをひとまとめにした画像と、表示をそれぞれ分離した画像を用意してみます。
それぞれ下のような画像・ファイル名とします。



・メイン表示ウインドウを表示させる画像一纏めにして作成する方法で使用する画像

 MainWindow.png
 MainWindow.png (クリックでオリジナルサイズの表示)



・メイン表示ウインドウを表示させる画像をぞれぞれ分離した状態で指定して作成する方法で使用する画像

 MainWindow_center.png
 MainWindow_Center.png (クリックでオリジナルサイズの表示)

 MainWindow_Top.png
 MainWindow_Top.png

 MainWindow_Left.png
 MainWindow_Left.png

 MainWindow_Right.png
 MainWindow_Right.png

 MainWindow_Bottom.png
 MainWindow_Bottom.png



CLaunchのスキンを作成する際の画像のファイル形式についてはBMPまたはPNGが指定できます。
(私個人は全ての画像形式をPNGにて指定しています)

なお、今回の画像ファイルとそれの名前はあくまで一例ですので、例えばメイン画像のTop部分だけ分離させて用意したり、ファイル名などを別の名前にする等は任意で変更可能です。



次回より、skin.xmlファイルにて指定する数値・文字列について説明していきます。
なお、メインで表示されるウインドウ画面の画像以外の画像(タブ・ボタン等)は今後作成しながら順次説明していきます。
posted by ばに at 00:00| Comment(0) | CLaunch skin作成手順
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: