げんちゃんゲームランド

げんちゃんゲームランド - 無料ブラウザゲーム 商人物語のサイト

2007年12月09日(日)

室内ドット絵一応完成

雪がどんどん降っていた。

商人物語ゲーム街の室内ドット絵が一応完成。といっても、ゲームに参加している人でないとわからないのだが、一応こんな感じ。
ファイル 1037-1.png
この間作成した風景は、それほど表示させる機会はないが、室内ドット絵は毎回表示されるので結構大事である。しかも、ただの飾りではなく、クリックできる場所が結構ある。このように、画像の任意の場所をリンクにするのは、なかなか難しい。これをどうやって実現するかについては、3つくらいの方法がある。まずは、スタイルシートの絶対配置による重ねあわせを利用した方法。げんちゃん素材街のように、建物の間を走る車とか、重ね合わせの表現ができる。ただ、スタイルシートを厳密に組まないと、難しい。また、絶対配置した部分はいいが、その周囲の編集がし難くなる。次に、テーブルを細かく組み、テーブルの各セルに背景画像を設定し、その上に画像をのせる方法。画像の重ね合わせは、背景画像と、のせる画像の2つまでしかできないが、手軽に使うには適している。あと、クリッカブルマップを使う方法もある。これは、1枚の画像の特定の場所をリンクとする方法で、地図などに使うと便利である。今回用いたのは、テーブルタグを使った方法で、以下のように画像を区切っている。
ファイル 1037-2.png
少しテーブルタグを知っている人なら、テーブルタグで左側を2行にして、右側が1行という配置はできそうだが、右側の変則的な列の配置はできないように見える。このような変則的なセルの結合をさせるには、結合させていないダミーのセルを上にこっそり配置しておくとよい。最近はテーブルデザインは使われなくなってきているが、テーブルタグを理解すると、意外と便利である。テーブルの中では、「valign」と「align」によって、クリックさせたい画像を配置すればよい。

コメント一覧

トラックバック一覧