今回も、去年同様、２００１年のNGW登録一番乗り^^)を目指して、ゲーム作成を考えた。
今回も野球ゲームネタを考えていたら、何やら選手会と機構側がもめ事。。。^^);;;
で、そういえば、もう冬だと思って、スキーやらなきゃ、からスキーゲーム作ろうに。^^)
ということで、スキーゲームを作ることに方向転換。
そこで一応、市場調査ということで、ネット上のスキーゲームなどをいろいろ見て回ったが、
どれも、スキーの醍醐味を感じられないものが多かったので、
やっぱ、スキーのエッジに乗り込む感じが大事だよなーーーー。
ってなことで、構想がまとまり。
まずは、スキーで滑る感覚に近づけるにはどうしたらよいか？
を考えた。
この回答が、マウスでドラグして、なおかつ、縦方向にドラグすることにより
ステップターンの要領でスピードが増して行くという考えにたどりつく。
そして、どうせやるなら、やっぱスラローム（回転競技）でしょ。でポール競技に。
あとは、実際にスクリプトで一歩一歩、試作して行くだけ。
今回は、NN6も期待に反して世の中に出ちゃったことだし、まあ対応しないとまずいかな。
ということで、NN6で作り出す。
さらに、クロスでIE4.0以上、NN4.x以上でも動かすため、基本部分のみのライブラリを作成。
このライブラリで大分作成が簡単になりました。^^)
はじめは、マウス操作のみを作り、次にポール表示を作り、ここまでは順調だったが。。。
ということで、これの詳細は以下の開発仕様＆日記（？）に書き留めて作りました。
なお、現在のNN6（IE5.5も似たり寄ったりだが）は画像レイヤ操作が非常に甘いので注意ね。^^)
で、この仕様＆日記（？）をhtmlソースの先頭に書いて行ったのは、
開発する上での一番のお勧めポイントです。
忘れずに覚えておけるし、進捗管理もできるし、
でいいですよ。^^)
以下、開発仕様＆日記----------------------------------------------------------
●NN6のマウス制御テストプロを改造しだす。
●IE/NN4.xでも動くように修正。
●マウスをドラグしたときに、別の位置にある画像を動かす。
●マウスをドラグしてなくても、画像を左右に滑らせる制御を考える。
●マウスでステップターンを可能にする。
●NN6/IE/NN4.xのクロスで動くように、基本命令部分はライブラリ化。
●画面内に表示するポール管理（初めは画面内のドットで作成）を考える。
●ポールのセッティング配列を考える。
●ポール画像とスキー画像を作る。
●単純に比例計算でポールを動かしてみるが。→やはり正確にやらないとと挫折。^^);;;
●背景画像の撮影をスキー場（どこだか分かるかな？）で行う。
・ここで本業が忙しくなり、１週間手付かず。^^);;;;
●画面内ドット単位を諦め、実際のメートル単位のポールを画面上に写像する制御を考える。
●ゴール表示制御を考える。
●ポールに激突／旗門不通過の判定を考える。
●背景画像を表示する。
×左右の背景画像を表示する。→これ無しでも十分なので省略。
●雪面画像を表示する。→ただし、背景までは動かせないですが。^^);;;
●ゴール左板、右板画像作成＆表示させる。
●NN4.xは、画像のリサイズが出来ないので、強引にdocument.writeでやったが、遅くて諦めた。^^);;;;
●最初に名前を入力してもらう。
●ゲーム開始ボタンを押すと、既に表示してある不要なものを消去し、
●ｘｘｘｘさん準備ＯＫと掲示板に表示。
●１０秒前で、「１０秒前」を１秒間、掲示板に上書き表示。
●５秒前に長いブザーを掲示板に表示させ。
●３秒前から１秒毎にブザーを表示させていく。
●３秒前ブザーから以後、マウスdownしたら、自動的にスタートとなる。
●３秒以前にマウスdownしても、無視する。
●スタートしたら、その時の時間を計測する。
●ところがNN6は、スタートしたらポールが一瞬消える。動きもぎこちない
●一瞬消えるのは、ＦＤからアクセスすると遅いようだ。ＨＤからではＯＫ。
●ぎこちなく、マウスが禁止マークになり、ドラグしなくてスキーもついてくるようになる。
→IE5.5対策と同じで、backの画像があるとおかしくなる。でbodyタグの背景にしたら、ＯＫになった。
ただし、ジオだとページＴＯＰにバナー表示があるのが辛い。仕方なく背景画像を下にバナー分ずらした。
●さらにNN6は、ドラグ中に旗門不通過か転倒で、ボタンが効かない。
→ドラグ開始位置に画像があり、ドラグ中にこの画像を非表示にすると、マウスイベントが発生しなくなる。
→したがって、消さなければＯＫだが、それだと画像が重なるので、画面外へ退いてもらうことに。
●今度は、IE5.5でスタートしたら、ドラグ中は全く画面が動かなくなる。
●背景に画像をレイヤで表示しているとマウスイベントが来ない為、遅くなる。→対策：背景をBODYタグのBACKGROUNDで指定する。
●ゴール板を切ったら、その時の時間を計測する。
●転倒時の画像作成＆表示＆確認後、ゲーム初期状態にする。
●旗門不通過時の画像作成＆表示＆確認後、ゲーム初期状態にする。
●画面が止まったら、ゴールの文字をグラディエーションしながらビューンと表示させる。
●自作スキンで画面の左上にタイムを表示する。（→あっ、これ秘密！！）
・変数にgm_GRS_X_skin_newgameweb（NGWのロゴ画像URL）を追加。
・新着、↑、↓の画像名をgm_GRS_X_skin_img_xxxとした（xxx=new,A,D）。
・GRS_X_skinimg_pathをゲームページから指定可能にした。
・タイトルを表示可能にした。
・自分のタイムが上位３名（または指定数）内になければ最後に表示するようにした。
●競技レベルを追加する。
●最高タイムをランキング登録するボタンを作成。
●それなら、最高タイムと滑ったタイムも表示する。
●なお、ゲーム開始ボタンを押したら、右上のタイムは消す。
●ゲーム用ポールを５０個（多いか？）セッテング＆最終調整。
●入力面倒なので、画面上でセッティングさせるツールを作る。
●これできるなら、インスペクション表示は簡単に出来たので追加。
●バックミュージックを付ける。なかなかスキーのテンポに合うフリーmidiが少ないですね。
・バグ：
●１）IEで旗門不通過時、×画像が表示されない。→なんか突然直った。
●２）自作スキン表示させると、メッセージが出ない,掲示板文字が細くなり、ゴールの文字も小さくなる。
原因：NN4.xだと、TABLE内にSPANでstyle属性を指定すると、以後styleが無視されてしまう。
対策：font,bタグでセル毎（IEはセル毎でないと無効）に文字色、サイズを指定する。
●３）IEで新着クリックで「数字を指定してください」のエラー → シュミレーションスキンモジュールの方でおかしいようだ。
●４）ポールが１０個目でオブジェクトがないでエラーになる。→スタックの不等号の間違い。^^);;;
●５）ゴールしたら旗門不通過？？？とは、とほほ。→単なるセッティングツールのバグでした。
●６）NN4.xでインスペクション表示のスタート・ゴール文字にstyleが無視される。→単純な文字指定ミス。
●７）Web上でテストしたら、なんとNN6は、マウスダウンとともに、ポールがみんな消えてしまった。^^);;;
確かにＦＤアクセスでは一瞬消えていたが、Ｗｅｂ上でも同じとは。で、この原因調べが非常にてまどった。
結局原因は、画像の幅、高さを変更すると、画面上の位置により消えてしまうようだ。
この位置が難しく、スクロールバーが出るような状態だと発生しやすい。
ということで、画像でなく、文字領域の背景色で代用。
●今回のbagzilla(Mozillaのバグ)登録件数：２件でした。ダハハ^^);;;;
Mozillaのバグ：修正した。
画像消える
で、今回のゲーム名称は、回転競技なので、
まあ大会ということで、スキー大会だ、ｘｘｘカップ杯なんてあるので、
それを真似て、「BayStars Skier's CUP スキー回転競技大会」とした。
で、開発秘話で投稿したものがNewGameWebメールマガジンにあります。
[0回]
野球観戦もなくオフは暇なので、
第２段のゲーム作成をすることにした。
じゃ何を作るかだけど、当然野球ゲームということで。
そこで、本格的な野球ゲームを作るかとも考えたが
それはちと無謀すぎるということで、即座に断念。
で、構想的には、１３５試合全部やりたいねという発想で、
ではどうやれば出来るかを考えた。
本格的なゲームだと、攻撃側と守備側でいろいろ作戦ねって
ゲームするけど、そんなことやってたら、１３５試合も出来ない。
そこで、小さい頃の野球盤的な発想で、攻撃側のみやる。
で、１イニングをまともにやっていては、時間掛かるので、
もっと簡単にできないか考えた結果。
そうだ、イニング毎の点数をくじで引くイメージが頭に浮かんだ。
これから、１０×１０の升目から、各イニング毎にひとつ選んで、
そこに得点が書いてある。その結果をスコアボードに表示する。
という基本案が出来た。
そこでこの案を、見た目の面白さと、リアル性を加えていった。
まず、見た目だけど、
升目にはボールを配置して、選ぶとボールが回転して、
止まると、結果が表示されるように考えた。
さらにスコアボードも表示しよう。
次にリアル性は、
１３５試合と言っても、当然セリーグだけだけど。
そのなかで自分の好きなチームをまず選ばせて、
そのチームの日程どおりの試合を行う事とし、
それ以外のチームの試合は、自動で行うことにした。
さらに、現実の日程は、雨で試合が中止になるため、
現実の試合日程も随時更新して、その時点のスケジュール
からゲームが始められるようにもした。
注）次の年から、パリーグも加えたが、現実の日程は
興味ないので対応はしてない。。。
これにより、シーズン終盤に優勝争いしているときに、
今後どうなるかを予想してもらう面白みも想定。
また、新聞に掲載されているような順位表も表示した。
この中で、マジックも当然表示することとした。
注）あと途中から勝敗グラフも表示できるように対応した。
また、１３５試合は長いので、クッキーを用いて
途中時点までを保存できるようにして、
続きを再開できるようにした。
で、構想が決まったので、１２月の中頃から製作を開始。
基本構造は１週間で出来たが、
一番苦労したのは、得点の割り振り方。
何も考えずに得点を割り振ると、すべて打撃戦になったので
こりゃまずいということで、
得点の割り振りには、３パターンを用意した。
?打撃戦、?投手戦、?普通の試合。
で、この３パターンの割り振りおよび得点頻度は、
１９９９年の横浜の実際の試合を調査して、
その割合をもとめ、その割合で制御した。
また升目への得点の配置は、上記のパターン毎の得点頻度を
テーブル化しておき、その得点を乱数で升目に配置し、
残りは０点にした。
あとは、マジックの制御がちょっと苦労したがなんとか出来て、
ついでに結果のコメントに。試合展開を考慮したコメントを付けた。
すなわち、逆転勝ち、完封、打たれ過ぎ、サヨナラ等のコメントを
試合の展開を覚えておいて、適切なコメントを出した。
で、冬休みに集中的に作成して、お正月に公開で進めたが、
ここで大問題が、Netscapeだと、途中でブラウザがフリーズしてしまう。
調査した結果、スコアを３試合分表示するので、
レイヤを多量に使用しているが、これが沢山あると、Netscapeはバグで
死んでしまうようだ。ということで、Netscapeは公開中止に。^^);;;
でなんとか、紅白歌合戦がやっているときに最後のテストを行い
お正月公開に間に合いました。
で、ゲーム名は、「ペナント競争」に決定。
その後、試合数および、優勝決定ルールがころころ変わり、
その都度、プログラムに追加して行ったので、疲れた。
でも２００５年から１リーグ制にでもなると、
チーム数が増えるために、大分プログラムいじる必要がありそうで
あああーーー困った。^^);;;;;;;;
で、もっと詳しい開発秘話がNewGameWebメールマガジンにあります。
[0回]
掲示板でJavaScriptが使えるということで、
ちょっと面白いこと出来ないかなと思っていろいろ考えてみて、
今月は１２月ですね。そう街中はクリスマス気分。
じゃ、サンタさんですよね。
ということは、サンタさんが掲示板の中を飛びまわって貰うのは
受けそうね。でも待てよ。それだけじゃ芸がない。
そう、サンタとくれば、ジングルベル。
同時にクリスマスソングも鳴らしちゃおう。
ということで、掲示板にジングルベルと共にサンタがやってくる
という企画を考えて、即実行に。
まずは、サンタのイラストは、さすがに自作できないので、
素材サイトを見てまわり、今回の企画に合った
トナカイが引いたソリに乗ったサンタのイラストに決めた。
で、このサンタを掲示板の中を飛び回る処理をJavaScriptで
作ってみた。単に直線的に動かしたのでは、感じが出ないので、
上下に波を打つように動かしたら、なんとなく感じが出てきた。
次に、音も自作無理なので、midiの素材サイトを見てまわり、
これはヤマハのＨＰに無料素材があったので、それを使わせて
貰った。で、ここにクリスマスソング以外にもいい音楽が
あったので、その中から掲示板に合いそうな曲も使わせてもらった。
それと、曲を自作できないかと、いろいろ調べたら、自動作曲なる
ことが出来るとのこと。それじゃと試してみた。まあ、様になってる
のは出来たのかな？
あと、お正月には、凧が飛んで、琴の音が鳴るのも、作ってみた。
このサンタの掲示板には、結構いい反応がありました。^^)
[0回]
某県内のＩＴ技術関係でＨＰコンテストがあることを知り、
さっそく、アクセスＵＰも期待して、応募することに。
コンテストの分野が２分野あり、１．一般と、２．Ｗｅｂ技術
で、２の技術分野で行くかどうか迷ったけど、協賛が
ＦＬＡＳＨメーカなので、おのずとＦＬＡＳＨを使った
ＨＰを期待してのことかなと思い、１．一般で応募した。
応募するに当たって、現在のＨＰでは、なんとなく
物足りないので、ユーザビリティを強化することに。
でいろいろ考えて、以下の２点で行くことにした。
１．ソフトメニューの導入。
２．トップ画面をマルチサイズ画面対応に。
まず、１．ソフトメニューは、
なにしろ、年代毎にコンテンツが増えていく構成になっているため、
年が経つにつれて、コンテンツの選択が複雑になる。
また、各ページに進むと、そこから他のページへ行くのは、
一旦トップページまで戻ってから進むことになるので、
操作が大変だし、時間も電話代も掛かる。
そこで、考えたのがＰＣでも使われているソフトメニュー。
これを各ページの頭に配置し、各ページから任意のページに
飛んで行けるので、操作性は格段によくなるはず。
操作性としては、
ＰＣでは、まずウィンドウ上部の固定位置のソフトメニュー上を
クリックして、プルダウンメニューを出して、目的のものを選択するが、
ＨＰ上では、ソフトメニューを配置しても、固定にするのは、
表示領域を狭めるので論外。そのため、スクロールすれば、
どっか行っちゃうので、ＰＣのように、ソフトメニュー上で
クリックするというのは、初めて来た人には、分からないはず。
で、ソフトメニューの上にマウスが乗ったら、プルダウンメニュー
を表示する方式を考えた。
あとは、これをどうやって実現するかだけど、まずＩＥでもNetscapeでも
動かすことを考えると、テーブルを使ってはどうもできなそうなので、
レイヤで作ることに。一応、ゲーム等で経験済みなので、
簡単に作れると思ったが、
これが難題。まずメニュー内に表示する文字の書式をＣＳＳで
指定するが、これがよく分からない。で当然ＩＥとNetscapeでは
挙動が違うので、この問題を解決するのが大変。
さらにマウスイベントを取得しながら制御しているが、
マウスを素早く隣の項目に移動するとか、ゆっくり移動するとか、
、するとマウスイベントが来なかったり、
順番が入れ替わったりとかあるので、
この辺は、フラグ制御とタイマ制御でなんとか
おかしくならないように出来た。
まあ、試行錯誤しながらなんとか動くものを作った。
さらにどうせなら、画像を使わずにボタン風に見せたい
ということで、ソフトメニューを５段階のレイヤ構造にして
位置を少しづつずらしながらボタン風にみせられた。
ところが、すべてボタン風に表示すると、１００ＭＨｚクラスの
ＰＣでは表示が凄く時間がかかる。ということで、
ボタン風に表示するのは止めました。T T);;
ということで、かなり素早く表示してくれるのが出来ました。
一応満足ということで。
[0回]
もうひとつコンテスト用として作ったのが、
ＰＣの画面サイズを判断してトップページのフォントサイズを
最適な文字サイズで表示すること。
これは横６４０サイズのノートＰＣを使って作っていたので
それを１０２４サイズのＰＣで見ると、かなり小さく見えるので
いっそのこと、横の画面サイズが変れば、それを判断して、
最適なフォントサイズに変更して表示することを行った。
まあ、ＣＳＳの勉強してて、JavaScriptでＣＳＳを変更する
ことが出来ることをＭＳのサイトで知ったので、この練習なの
ですが。。。
その結果、レイアウトは崩れずにフォントサイズだけ可変に
表示されるので、まあ、まともかな。
でも大きなサイズはさすがにダラシナイ感じかな。
まあ、こういうテクニックを使ってるページは見たことないので
面白いとは思うが、やはり画像とかでレイアウトをドット単位で
細かく作っていると、こういうことは出来ないよね。
当サイトは、テキスト中心で作っているので、可能だけどね。
ところで、コンテストの結果だけど、
１．一般に沢山エントリーがあり、
２．Ｗｅｂ技術にはあまりエントリーがなかった。
で、紹介文に、協賛会社のＦＬＡＳＨの悪口的なことを書いたので、
見事に第１次で落選でした。まあ、JavaScriptの方がプラグインも入らなく
直ぐ動くので快適だよ的な事を書いたので、目にとまりましたかね。^^);;
一般エントリーだったので、やはり某県内のＨＰコンテスト
ということもあって、ビジネス中心で個人ＨＰの評価は低いのは仕方なし。
２．Ｗｅｂ技術にエントリーしておけばよかったかなと、
ちと後悔先に立たず。^^)
[0回]