OggPlayのスキンの作成方法

ここでは702nk/nkII用(Symbian S60用)のOggPlay用のスキンの作成方法です。
OggPlay本体はこちらになります。[OggPlay]
2006/01/16 OggPlayがVer1.6.7にバージョンアップしました。
2006/04/29 OggPlayがVer1.6.9にバージョンアップしました。

Oggファイルについてはこちらに。

まだ、動作確認作業をしながら作成してますので、意味不明な点や、間違いがある可能性があります。
あくまでも自己責任で作成してください。
サンプルとして3rdED_ogg_V1.1のbmpファイルを公開しますので、参考にしてください。[3rdED_ogg_V1.1_src.zip]

・ポイント
自分で、好きなデザインが作れます。
Oggplayの登録できるスキンは10個それ以上はリストに表示しない
702nk/nkII本体のsystemフォントにより表示が変わります。
systemフォントを変えるわけには行きませんので、フォント関連のサイズや位置を修正する必要がある場合があります。
(systemフォントを変えると表示が変わります)
oggファイルの再生のときにアナライザーが動きます。
音楽のTitleとArtistは別々に表示させないと、同時表示になります。
OggPlayには２個のキャンパス(背景)があり、fkip-openとflip-clodes modeがあります。
flip-clodes modeはオプションです。(シングルスクリーンモードしかないため、特に必要ではないので)
キャンパスはコントロール機能をふくんでおり、スキンは複数のビットマップ・ファイルとスキン定義ファイルによって定義されます。
Ver1.6.6からN90に対応し.352x376の解像度にも対応していますが、702nk/nkIIでは起動して使えますが176x188の部分しか表示できないので使えません。
スキンの作成には今までどおりの指定の方が無難です。
また、Ver1.66からVolume Boost機能が追加されました。
Ver1.6.9からalarm機能が使えるようになりました。

作成手順
1.背景のためのビットマップイメージの作成
176x188 bmp file(image19.bmp)　(サイズは本当は自由です)
mbmwhizadで結合するときに自動変換されるのでjpgファイルでもかまいません。
サイズも表示がオーバーするだけで問題なく使えます。
例 image19.jpg 180x200
(symbian80の場合 flip-open: 208x254 pixels; flip-closed: 208x144 pixels)


2.各コントロールのためのビットマップ・イメージの作成
アイコンは14x14が標準的です。(サイズは本当は自由です)


3.それぞれのビットマップ・イメージの結合ファイルの作成。(*.mbmファイルの作成)
mbmwhizadを使って結合させます。
最低0～35の36個のイメージファイルを用意してください。
各イメージファイルと必要なマスクビットマップも用意し、登録順とカラーモード(写真がある場合は/24)を確認し一度に登録してください。
発色数が多いと当然データサイズが大きくなります。（使用には問題ないみたいです）



登録後、マスクビットマップを /c1でmonoに登録変更しなおす。
変更しなくとも問題ないですが、ファイルサイズが小さくなります。

ファイルを保存して完了です。


4.スキン定義ファイル(*.skn)の作成
asciiのテキストファイルです。

5.作成した*.mbmと*.sknファイルを702nkにコピーしてインストールします。(\system\apps\OggPlay)
(インストールファイル *.sisに圧縮しておく方法もあります)

6.OggPlayのメニューからskinsの項目から使用したい新しいスキン名を選択して出来上がりです。


必要なソフト
1.BMCONV.EXE
2.mbmwhizard.exe
(ここからダウンロードできます 現在はダウンロードできなくなってます)

mbm(The multiple bitmap file)ファイルの作成
スキンのためにはbitmapをまとめたmbmファイルが必要です。
ファイルの最初の20個のビットマップファイル(0～19)に、格納の意味があります。
ファイル名で認識するのではなく、登録順の順番で認識しています。
よって、mbmファイルの作成時には登録の順番に注意してください。
(20～33に未使用でもダミーファイルを入れて作成しないと順番がずれて34,45を認識できすエラーになります。)
プレイリストのlistboxは以下の固定サイズ20×16のイメージ(それぞれ1つのビットマップ+のマスクビットマップ)を使用します

0～19 予約されたファイル
20～33 ユーザー定義のファイル(使わない場合は1x1のダミーデータを入れる)
34,35 予約されたファイル
34～60 ユーザー定義ファイル

index	意味	ファイル名	使用例	使用例
0	icon for a track title	image00.bmp
1	マスクビットマップ	image01.bmp		マスクビットマップ
2	icon for an album	image02.bmp
3	マスクビットマップ	image03.bmp		マスクビットマップ
4	icon for an artist	image04.bmp
5	マスクビットマップ	image05.bmp		マスクビットマップ
6	icon for a genre	image06.bmp
7	マスクビットマップ	image07.bmp		マスクビットマップ
8	icon for a folder	image08.bmp
9	マスクビットマップ	image09.bmp		マスクビットマップ
10	icon for a file	image10.bmp
11	マスクビットマップ	image11.bmp		マスクビットマップ
12	icon representing the action "go back"	image12.bmp
13	マスクビットマップ	image13.bmp		マスクビットマップ
14	icon representing the state "playing"	image14.bmp
15	マスクビットマップ	image15.bmp		マスクビットマップ
16	icon representing the state "paused"	image16.bmp
17	マスクビットマップ	image17.bmp		マスクビットマップ
18	flip-close modeの背景画像	image18.bmp		208x144 特にいじらない
19	flip-open modeの背景画像	image19.bmp		176x188 サイズ自由
20	ユーザー定義	image20.bmp		PlayedDigitsで使用
21	ユーザー定義	image21.bmp		PlayedDigitsで使用
22	ユーザー定義	image22.bmp		PlayedDigitsで使用
23	ユーザー定義	image23.bmp		PlayedDigitsで使用
24	ユーザー定義	image24.bmp		PlayedDigitsで使用
25	ユーザー定義	image25.bmp		PlayedDigitsで使用
26	ユーザー定義	image26.bmp		PlayedDigitsで使用
27	ユーザー定義	image27.bmp		PlayedDigitsで使用
28	ユーザー定義	image28.bmp		PlayedDigitsで使用
29	ユーザー定義	image29.bmp		PlayedDigitsで使用
30	ユーザー定義	image30.bmp		PlayedDigitsで使用
31	ユーザー定義	image31.bmp		PlayedDigitsで使用
32	ユーザー定義	image32.bmp		PlayedDigitsで使用
33	ユーザー定義	image33.bmp		PlayedDigitsで使用
34	OggPlay予約	image34.bmp
35	OggPlay予約のマスクビットマップ	Image35.bmp		マスクビットマップ
36	ユーザー定義	Image36.bmp		PlayingIconで使用
37	ユーザー定義	Image37.bmp		マスクビットマップ
38	ユーザー定義	Image38.bmp		PausedIconで使用
39	ユーザー定義	Image39.bmp		マスクビットマップ
40	ユーザー定義	Image40.bmp		RepeatIconで使用
41	ユーザー定義	Image41.bmp		マスクビットマップ
42	ユーザー定義	Image42.bmp		Volumeで使用
43	ユーザー定義	Image43.bmp		マスクビットマップ
44	ユーザー定義	Image44.bmp		Positionで使用
45	ユーザー定義	Image45.bmp		マスクビットマップ
46	ユーザー定義	Image46.bmp		ScrollBar
47	ユーザー定義	Image47.bmp		マスクビットマップ
48	ユーザー定義	Image48.bmp		Analyzerで使用
49	ユーザー定義	Image49.bmp		マスクビットマップ
50	ユーザー定義	Image50.bmp		alarmで使用
51	ユーザー定義	Image51.bmp		マスクビットマップ

一覧表のテーブルインデックスはビットマップの予約された番号でスキン定義ファイルで使われます。
残りの番号は自由に割り当てでき、スキン定義ファイルで定義します。
そして、すべてのビットマップファイルを1つのファイル(*.mbm)に結合します。

スキン定義ファイル(*.sknファイル)
OggPlayのデフォルトのスキンはOggPlay.sknで定義されています。
新しいスキンを作るということは、このファイルを変更することになります。
内容は機能とそのコントロール定義です。
"//"でコメント行としてシステムには認識できない行になり、メモやコメントが入れられます。
ビットマップイメージは60番までしか扱えません。(mbmは60以上登録可能です)

OggPlay 1 {
FlipOpen {
PlayingIcon {
Position 15 9 105 12
Icon 26 27
}
ListBox {
Position 6 38 162 144
Font JapanPlain16 1 0
FontColor 46 51 109
FontColorSelected 181 203 227
BarColorSelected 102 114 150
}
//Clock {
//Position 128 9 40 15
//Font LatinBold19 1 1
//FontColor 255 51 109
//}
Played {
Position 10 25 80 10
Font JapanPlain12 1 1
FontColor 46 51 109
}
Volume {
Position 114 24 39 10
Style 0
KnobIcon 22 23
}
}
}

機能一覧

各コントロールが持つことができる属性はコントロールタイプによって定義されます:
・すべての物に共通であるのは、Positionで位置とサイズを指定します。x、y画素位置、幅、および高さを表しいます。
位置(x=0、y=0)はスクリーンの左上に対応しています。
　Position 51 84 93 74
　左から51,上から84,幅93,高さ74


・Icon
同じサイズの2つのビットマップを使用します。
サイズは任意です。(14x14が標準的なサイズ)
最初の1つは実際のアイコンビットマップです、そして、2番目の1つはアイコンの見え透いた画素を定義するmonochromマスクです:
すべての白い部分が透明です(バックグラウンドビットマップははっきりわかります)。
1つはイメージとそのマスクに全く同じビットマップを使用することができます。
属性名はイメージとマスクビットマップのインデックスがいうことになったIconです。
アイコンは与えられた頻度で瞬くことができます。
数があとに続いた属性BlinkFrequencyを使用してください(私は、それが1/第10およそ2番目のユニットにあると思います)。

PlayingIcon {
　　Position 11 94 50 30
　　Icon 36 37
　}

・Slider
スライダーのノブは1つのビットマップとマスクビットマップの組み合わせで使います。:
スライダー「バックグラウンド」がキャンバスに関する背景画像で目に見えるます。
ノブアイコンのサイズは任意にchoosenな場合があります。
属性名はイメージビットマップとマスクビットマップのインデックスがいうことになったKnobIconです。
severlスライダースタイルがあります(属性様式を使用してください):
Style 0 = ビットマップを左から右まで順番表示していきます;
Style 1 =下から上へ減っていきます
Style 2 = ノブビットマップは左から右まで動きます;
Style 3 = 2と同じですが、動きが下から上へ動きます。
Style0と2は機能しますが、他のものは本当にテストされません。

Volume {
　Position 20 61 50 10
　Style 2
　KnobIcon 42 43
}

・Button
これはいくつかのビットマップとマスクを取ります。
もっとも、それらは皆、任意です(人は、バックグラウンドキャンバスイメージの一部としてボタンを描くことができて、したがって、どんな追加イメージも提供する必要はありません)。
ボタンにはいくつかのパターンイメージがあります:
Normal/Pressed/Dimmed.
また、後者の3つのビットマップがそれぞれマスクビットマップを必要とします。
さらに、1つはボタンの活動領域を定義するマスクビットマップを割り当てることができます、
すなわち、針のチップがボタンの引き金となる(属性名はマスクビットマップのインデックスがいうことになったActiveMaskです)領域。
黒い領域がアクティブである、白い領域は不活発です。
属性名は、NormalIconと、PressedIconと、DimmedIconと、イメージのインデックスがあとに続いたそれぞれとマスクビットマップです。

・Analyzer
Analyzerは1個の棒タイプのビットマップをもとにした、1つのビットマップです。
使用可能になるように3幅画素でビットマップを作成してください、
高さは自由に設定できます。
atrribute名はイメージのインデックスリストとマスクビットマップがいうことになったBarIconです。
OggPlayのバージョンにより機能しません。
OggPlay Ver1.6.5でoggファイルの再生で動きます。

Analyzer {
Position 60 78 60 20
BarIcon 48 49
}

・ScrollBar
これは現在、1つのビットマップ(+マスク)の組み合わせです:
KnobIconはインデックスリストのビットマップとマスクビットマップの番号です。
Styleは、スクロールバーが垂直な(0)かそれともhorizintal(1)であるかを定義します。
Stepはスクロールバー矢が押されるならスクロールされる線の数を定義します。
ページ属性はスクロールバーシャフトがklickedされるときスクロールされる線の数を定義します。
ScrollerSizeはスクロールバー(すなわち、垂直なスクロールバーの場合の高さと水平なスクロールバーの場合の幅)の画素数です。
ScrollBar {
Position 165 85 10 120
KnobIcon 46 47
Style 1
ScrollerSize 10
Step 1
}


・ListBox:
listboxは、すでに説明されるように複数のビットマップ・ファイルからイメージを取ります。
フォントカラーはRGBの0～255までの数値とFontColor属性によって設定されます
同様に、選択された音楽のフォントカラーはFontColorSelectedによって設定されます。
フォント名、twipsの字体サイズ、および字体スタイル(0=標準; 1=のボールド)は属性Fontのあとに続いています。
１行の文字高さは16ドット使用しますので、5行表示したい場合は5x16=80ドットでぴったり収まります。
（60-1=59で１ドット少なく高さ設定すると、最下位の行が選択されたと時、自動的に繰り越表示されます）
利用可能なフォント名とサイズに関して以下のテーブルを見てください。
ListBox {
Position 4 108 168 80
Font JapanPlain12 20 1
FontColor 0 0 102
FontColorSelected 240 240 240
BarColorSelected 51 102 255
}

・Text:
フォントの色はFontColorでGRBの赤・緑色・青色の0～255までの数値で設定します。
フォントの種類はFontのあとに続いて フォント名、twipsの字体サイズ、および字体スタイル(0=標準; 1=のボールド)で設定します

twipsのサイズは0～15で16ポイントサイズ,16以上だと強制的に12ポイントフォントを使います。
twipsの設定機能がいまだに不明。とりあえず、16ポイントを使いたいときは設定を「1」ぐらいにしておく。
実際の表示でオーバーするとスクロール表示する。
Artist {
Position 10 92 158 18
Font JapanPlain12 1 0
FontColor 0 0 102
Style 2
ScrollDelay 10
ScrollStep 4
}

以下の字体は利用可能です:

フォント名		フォントスタイル		備考
		Nomal(0)	Bold(1)
JapanPlain12				日本語フォント
JapanPlain16				日本語フォント (system フォントによる)
LatinBold12	7			英文font
LatinBold13	8			英文font
LatinBold17	10			使用不可?
LatinBold19	11			使用不可?
LatinPlain12	7			英文font
Alpi12	7			英文font
Albi12	7			英文font
Alp13	8			英文font
Alpi13	8			英文font
Albi13	8			英文font
alp17	10			英文font
Alb17b	10			英文font
albi17b	10			英文font
alpi17	10			英文font
Acalc21	21			数字fontのみ,時刻表示用	60 21
Acb14	14			数字fontのみ,時刻表示用	40 14
Acp5				数字fontのみ

・Animation:
属性のFirstBitmapとNumBitmapsはアニメーションに使用されるビットマップインデックスリストを定義します。
属性Frequencyはアニメーション速度を定義します、そして、(デフォルトは2です)Pauseは2アニメーションサイクルの間の時間inbetweenを定義します。
Styleはアニメーションがどう演じられているかを(終始するときの当時の0=くぎり; 始めと始めから終りまでであって逆の=1つのくぎり)定義します。

・Digits:
このコントロールは.0～9のキャラクターのためのビットマップとマスクbitampsです
「0インチのビットマップ」のインデックスは属性Bitmapsのあとに続いています。
「0インチのマスクビットマップ」のインデックスは属性Masksのあとに続いています。
マスクはオプションです。
時間やタイムの表示のときに使いますが、システムフォントにはない表示を可能にします。
通常はシステムフォントでの表示のほうがいいかもしれません。


PlayedDigits {
　Position 73 0 90 45
　Bitmaps 20 14
}
　TotalDigits {
　Position 100 5 120 20
　Bitmaps 20 14
}
}


・HotKeys
OggPlay本体のHotKeyの設定をできます。
スキンで設定していると、Oggplayのオプション設定に登録され、他のスキンを呼んでも再度設定しない限り有効です。
keyLock,Pauseには未対応で設定できません。
Ver1.66からVolume Boostに対応になり設定可能になっています。

HotKeys {
FastForward 5
Rewind 8
PageUp 6
PageDown 4
NextSong 9
PreviousSong 7
PauseResume 2
VolumeBoostUp 1
VolumeBoostDoun 3
}
Hotkeys設定内容例
0 Stop 停止
1 VolumeBoostUp
2 PauseResume 休止/再生
3 VolumeBoostDoun
4 PageDown 曲一覧次表示
5 FastForward 曲の早送り
6 PageUp 曲一覧前表示
7 PreviousSong 前の曲
8 Rewind 曲の頭だし
9 NextSong 次の曲
# Repeat 繰返し再生

・Botton
ノーマル・押された状態・非活性状態の3パターンを登録でき、テンキーなどと連動させます。
登録アイコン数が多くなります。
PlayButton {
　Position 142 81 34 33
　NormalIcon 42 43
　PressedIcon 44 45
　DimmedIcon 46 47
　KeyBind 8
}

Alarm
アラーム設定したときのアイコン表示とアラーム時間の表示
OggPlay Ver1.6.9から対応しました。
Alarm {
　Position 135 73 48 12
　Font JapanPlain12 0 1
　FontColor 0 0 102
}
AlarmIcon {
　Position 120 70 13 15
　Icon 50 51
}
}



追加

起動時の画面も変えられる。

Oggplayソフト本体の中に「s60splash.mbm」というファイルがそれです。
その中の「image0.bmp (176x208)」が、それです。
これも、mbmwhizadを使ってかえれば、起動時に表示が変わります。
ほかのmbmファイルと同じホルダー(system\apps\OggPlay）に入れても大丈夫です。