コンピュータゲームを題材として活用する情報教育の教材・実践事例をまとめたサイトです．

FrontPage

目標

• 色表現を使ったビット表現の復習
  • 特定のビット列に対して，何の情報が対応しているかはその都度異なる
  • 色も一つの「情報」・・・ビット列の長さによって表現可能な色の数が変化する

授業の流れ

• まずゲーム画面（ドンキーコング）
• ドット(ピクセル)の話
  • ゲーム画面は究極的には点の集まり
  • コンピュータディスプレイの「解像度」も，表示できるドット(ピクセル)の数を表す
• 画面上の「ドット」の変遷
  • ODYSSEY
  • ATARI 2600
• ゲーム機の進化とグラフィックの進化
  • 「ファイナルファンタジー(FF)」を題材に
  • ファミコン - FF
    • 1キャラクタ4色
  • スーパーファミコン - FF V
    • 1キャラクタ16色
  • プレイステーション - FF VII
    • ここでポリゴン登場．もはや色数はカウント不可能
  • プレイステーション3 - FF XIII
    • VIIと比べて，ポリゴンの形が視認できないレベルまで細かくなっている
• ポリゴンの説明
  • 3次元上の平面（通常三角形）
  • この平面を多数組み合わせて，立体的なグラフィックを描画
  • つまり考え方はドット描画と同じ．ただし1ポリゴン辺りの情報量が異なる
• ドットグラフィックとデータ量
  • マリオになぜヒゲがあるか？の小話も挟みつつ
  • ドンキーコングの例で示したマリオのグラフィックを，16x16の点で表したとき，最低限必要なデータ量は何ビットか？（ミニテスト）
    • キャラクタに4色使われている（=ファミコンの仕様）ことは明示．
    • ビット列によるデータ表現の復習
  • 色パレット方式
    • 使用する色を変えて別キャラクタとして表現（昔からよく使われる手法）
    • 例：マリオブラザーズ
• データサイズと計算機の性能
  • スプライトの話
  • マシンの処理性能を超えてキャラクタを表示させた時，高速に表示キャラクタを切り替えることで全体を表示→チラツキ
    • 実際のゲーム映像で説明
• ベクタースキャンの話（たいてい時間が足りなくてこの前で終わってしまうが）
  • 少ないデータ量で立体的な表現ができる事例
  • マイナーすぎて誰も知らない（著者もこの授業を始める前は知らなかった）が，1980年代当時として見ると映像のインパクトは大きい

使用素材

ドンキーコング(ファミコン版：1983, 任天堂)

• 参考資料(リンク先はバーチャルコンソール版) : http://www.nintendo.co.jp/wiiu/software/vc/fafj/
  • ドット表現のサンプルとして使用．このソフトである必要は無いが，第2回でスーパーマリオを使ったという流れで．
    
    あとここで取り上げたのは，このゲームを知らない受講生向けに，後の著作権の回で使用するための布石の意味もある．

ODYSSEY (1972, Magnavox)

• 参考資料: http://www.videogameconsolelibrary.com/pg70-odyssey.htm (Magnavox Odyssey - Video Game Console Library)
• 当時のCM: http://www.youtube.com/watch?v=H2EIsnr_cv4
  • 世界最初の（市販された）家庭用ゲーム機

ATARI2600 (1977, Atari)

• 画像(Wikipedia)
  • アメリカで大ヒットした家庭用ゲーム機
• グラフィック描画の仕様が独特 （参考: http://d.hatena.ne.jp/BCC/20120220/p1 )
  • 画面解像度：横40ドット，縦1ドット (!?)
  • 要は走査線ごとにグラフィックを描画する仕様．仕様では画面上に縦192ドットまで表現ができ，これは当時としてはかなり細かい方．
  • とはいえ，マシンの性能上の問題で，実際は走査線ごとの再描画は難しいらしい
  • 横40ドットも，正確には横20ドットx左右対称描画で実現している．

Pitfall! (1982, Activision)

• 画像(Wikipedia)
  • 確かに背景の描画が左右対称になっている
  • ATARI2600 でヒットしたゲーム

カセットビジョン (1981, エポック社)

• 画像(Wikipedia)
• 参考資料 (CLASSIC VIDEOGAME STATION:ODYSSEY 2001):
  • http://www.ne.jp/asahi/cvs/odyssey/creators/horie/ (エポック社堀江 正幸氏へのインタビュー)
  • http://www.ne.jp/asahi/cvs/odyssey/hyperlink/setframe_creators_hara1.html (エポック社・原 洋氏へのインタビュー)
• スペック
  • チャンネル表示用チップを使用．
    • 画面解像度は横54ドットx縦62ドット．同年代のゲーム機と比較してもその異様なドットの大きさは際立っている
    • たまたまこのチップに，ドットを平行四辺形に歪ませる機能があり，それを活用してジャギーのない斜め線の表現が可能

きこりの与作 (1981, エポック社)

• カセットビジョン用
  • プレイ動画: http://www.youtube.com/watch?v=HpaIb2Ptygs

ファミリーコンピュータ (1983, 任天堂)

• 画像(Wikipedia)

ファイナルファンタジー (1987, スクウェア)

• 公式: http://www.jp.square-enix.com/archive/ff1/
  
  参照(こちらはバーチャルコンソール版) http://www.nintendo.co.jp/wiiu/software/vc/fbtj/
  • ファミコン用ソフトとして発売
  • 昔からグラフィックに力を入れているゲームで，歴史もあり「グラフィックの変遷」の題材には格好の素材

スーパーファミコン (1990, 任天堂)

• 画像(Wikipedia)

ファイナルファンタジー V (1994, スクウェア)

• 参考(バーチャルコンソール版): http://www.nintendo.co.jp/wii/vc/vc_ff5/
  • スーパーファミコン用ソフトとして発売

プレイステーション (1994, SCE)

• 画像(Wikipedia): http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:PlayStationConsole_bkg-transparent.png

ファイナルファンタジー VII (1997, スクウェア)

• 公式(リンク先はPC版): http://www.jp.square-enix.com/ffvii-pc-jp/
  • 家庭用ゲーム機でポリゴン描画が主流になって間もない頃のグラフィック例．

プレイステーション3 (2006, SCE)

• 画像(Wikipedia)

ファイナルファンタジー XIII (2009, スクウェア・エニックス)

• 公式: http://www.square-enix.co.jp/fabula/ff13/

マリオブラザーズ (1983, 任天堂)

• バーチャルコンソール版: http://www.nintendo.co.jp/wiiu/software/vc/faej/
  • 色だけ変えて違うキャラクタとして登場させている例
  • せっかくマリオが続いたので，マリオつながりで．同様の手法は，データ容量の少なかった当時のゲームでは多用されている
    • 開発の労力が飛躍的に増えた今のゲーム開発でも多用されている？
    • 「同じ色で別表現」は，オブジェクト指向プログラミングの例にも使えそう（当時のゲームプログラムではオブジェクト指向は使っていないので，あくまで架空の例になってしまうが）．

グラディウスII (1988(ファミコン版), コナミ)

• バーチャルコンソール版: http://www.nintendo.co.jp/wii/vc/vc_gr2/
  • スプライト表現とコンピュータ性能の関係の事例として使用．
  • とにかく大量にキャラクタが登場するため，チラツキ表現が多用されていて見た目にもわかりやすい
    • 実機で遠隔配信してみたが，遠隔の受講者にもしっかりチラツキが見えていたみたい．
    • ビデオで収録すると，フレームレートによってはチラツキが確認しにくくなる
  • さらにボスキャラは，ファミコンで表現できるスプライトの制限を遙かに超える大きさなのに，チラツキが発生しない
    • 実はスプライトではなく，背景グラフィックとして描画（これも当時多用されたテクニック）

その他

ファミコンのグラフィック仕様

• 参考資料: http://www.wizforest.com/OldGood/ntsc/famicom.html
  • 授業内では http://www.wizforest.com/OldGood/FamiCom/FamiMisc.html の色パレット画像を引用
  • 使用可能な色数は52色，各色6ビット(色4bit, 明度2bit)
    • 透明色（背景を表示）も含む
    • ビットと色の関係は，開発者の決めうち（ゲームに使えそうな色を厳選）
      
      →ビット列はそれ自体が意味を持つのではなく，それとデータ定義との対応関係で決まる，という好例

ポリゴン参考資料

• http://www.youtube.com/watch?v=-bZ7gstIWyI The Polygon (Guerrilla CG Project)
  • 2分でポリゴンの概念をわかりやすく説明．英語のみだが，映像だけでも十分理解可能．

ベクタースキャン

• 特殊なブラウン管を使用し，走査線を縦横斜めに自在に描画可能
• ワイヤーフレームの3次元表現が容易ということで，80年代のアーケードゲームで使用
  • 直線描画のみで，ドットの概念がない
    • 座標変換だけでダイナミックな表現が可能
• 参考資料: http://vectrex.takuranke.com/zvg_wg6100.html
• 映像: http://www.youtube.com/watch?v=rbq1LE9MJc0 Major Havoc (1983, Atari)

ゲームボーイ

• グラフィック:モノクロ4階調

さらにいろいろ（ボツ案）

• 様々な3D表現（若干専門寄り・ゲーム寄りの知識になるので，配付資料に補足として掲載し，授業では使わず）
  • ワイヤーフレーム
    • ウィザードリィ：主観視点での迷宮のグラフィック表現を線だけで表現（参考: http://venturebeat.com/2010/12/20/forgotten-ruins-the-roots-of-computer-role-playing-games-sir-tech/ ）
  • ラスタースクロール
    • 割り込みをかませることで，走査線毎に描画位置を微妙にずらすことで，画面全体を歪ませる描画手法
    • うまく使うと奥行きのあるような動きに見せられるため，レースゲームで多用
  • 画像の拡大・縮小・回転を用いた立体表現
    • F-ZERO (1990, 任天堂) レースゲーム
  • スプライト多用による疑似3D表現
    • パワードリフト (セガ)