• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Perl Hobby Programming - Games::BeLike::EightBIT ターミナルで8ビット風ゲームをつくろう
 

Perl Hobby Programming - Games::BeLike::EightBIT ターミナルで8ビット風ゲームをつくろう

on

  • 1,883 views

 

Statistics

Views

Total Views
1,883
Views on SlideShare
1,509
Embed Views
374

Actions

Likes
0
Downloads
0
Comments
0

6 Embeds 374

http://yapcasia.org 205
http://d.hatena.ne.jp 156
http://a0.twimg.com 5
http://paper.li 5
http://webcache.googleusercontent.com 2
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Perl Hobby Programming - Games::BeLike::EightBIT ターミナルで8ビット風ゲームをつくろう Perl Hobby Programming - Games::BeLike::EightBIT ターミナルで8ビット風ゲームをつくろう Presentation Transcript

    • Perl Hobby Programming - Games::BeLike::EightBITターミナルで8ビット風ゲームを作ろう
      ゲーム製作協力(画像提供): nekokak氏
      谷内 元 twitter@keroyonn_ / Hokkaido.pm
      YAPC::Asia 2011
    • 自己紹介
      WEB系プログラマ in Hokkaido.pm
      仕事のメイン:Java/Flex/ExtJS-> 最近Perl
      趣味のメイン:C# + WPF+ Perl
      ちょっとずつ違う素敵なID達
      cpan : keroyonhttp://search.cpan.org/~keroyon/
      github : keroyonnhttp://github.com/keroyonn
      twitter : keroyonn_http://twitter.com/keroyonn_
      hatena :keroyon0630http://d.hatena.ne.jp/keroyon0630
      YAPC::Asia 2011
    • Games::BeLike::EightBITその特徴
      ターミナルにグラフィックを描いてゲームをつくれるよ! (Curses)
      8ビット時代のコンシュマー機と同等以上の解像度でアクションゲームも制作可能
      簡単 && perlで全部作れる
      (ターミナル上の vim からそのまま実行できる)
      スプライト、マップ、スクロール、イベント、キーアップイベントのエミュレーションなど
      (将来項目) line & paint スタイルのグラフィック
      YAPC::Asia 2011
    • 注意事項
      テストもドキュメントも例外処理もないし、APIすらまだあまり決めていないよ
      CPU負荷が高いので、本番サーバーに入れて遊ばないでね。
      もちろん、新手のワームとして使いたい場合は別だよ!
      YAPC::Asia 2011
    • 最近の開発とか
      YAPC::Asia 2011
      そんなことも
      あろうかと
    • 最近の開発とか
      YAPC::Asia 2011
      メモリリークだって直してないよ!
    • 作った動機 1
      Perlでも気楽にホビープログラミングがしたい。
      特に絵が動いたりするやつ。
      PlackとかRouter::SimpleでオレオレWAFとか Web::Scraper とか、ホビープログラミングは気軽にできる。
      しかし、グラフィックを扱いたい
      ゲーム系の書籍に書いてあることが、Perlで気軽に試せるようにしたかった
      YAPC::Asia 2011
    • 最近の開発とか
      YAPC::Asia 2011
      こういうの
    • 作った動機 2
      気楽にできるようにしたい
      環境を作るコストを0にしたい
      つまり開発用VMとターミナルで動いてほしい。
      普段はターミナルしか使わないし、
      Windows環境に「そのためにしか使わない」perlとSDLを入れるくらいなら、Flash Builder 立ち上げて作る方がむしろ早くて合理的
      • 学習コストを下げたい
      面倒な決りごとや、概念を学習しないで使えるようにしたい
      YAPC::Asia 2011
    • 何ができるのか
      YAPC::Asia 2011
      デモ
    • 最近の開発とか
      YAPC::Asia 2011
      DEMO: PuTTYの実行画面
      Gradiusゴーファーの野望のパロディです。
    • 最近の開発とか
      YAPC::Asia 2011
      DEMO: PuTTYの実行画面
      「トップを狙え」を意識しています。
    • 最近の開発とか
      YAPC::Asia 2011
      DEMO: PuTTYの実行画面
      こちも「トップを狙え」を意識しています。
      VicPHPerはVicviperです。
    • 最近の開発とか
      YAPC::Asia 2011
      DEMO: PuTTYの実行画面
      PHPerが悪のPerlMongerを倒すという誰もが納得の勧善懲悪シューティングとなっております。
    • 最近の開発とか
      YAPC::Asia 2011
      DEMO: PuTTYの実行画面
      クトゥルフの二次創作をしたものは破滅すると言われています。
      あっ!やば。俺じゃん。
    • 最近の開発とか
      YAPC::Asia 2011
      DEMO: PuTTYの実行画面
      ステージ1は「省鯖運用的空間」となっています。
    • 最近の開発とか
      YAPC::Asia 2011
      DEMO: PuTTYの実行画面
      フレームレートが30はりつきです。
      現在の表示スプライト数は22個です。
    • 最近の開発とか
      YAPC::Asia 2011
      DEMO: PuTTYの実行画面
      背景の星と手前の地形は一応多重スクロールです。
    • 最近の開発とか
      YAPC::Asia 2011
      DEMO: PuTTYの実行画面
      ボスが後方から高速で飛来して駆け抜けていきます。
    • 最近の開発とか
      YAPC::Asia 2011
      DEMO: PuTTYの実行画面
      点滅するワーニング。登場するボスは、ビッグ鯖でんな。
    • 最近の開発とか
      YAPC::Asia 2011
      DEMO: PuTTYの実行画面
      目玉がコアになっています。ビックコアは青白く、銀色に光り鯖に似ているなーと思いました。
    • 簡単なゲームを作ってみるその1 準備
      Githubで落してインストール
      https://github.com/keroyonn/p5-Games-BeLike-EightBIT
      perl Makefile.PL
      make
      make install
      注意:
      ドキュメント、テスト、例外処理がなく、APIも決定していません。タグづけもしてません。
      依存モジュールは、Curses と Class::Accessor::Fast です。
      YAPC::Asia 2011
    • 今回作るゲーム
      YAPC::Asia 2011
      デモ
    • 最近の開発とか
      YAPC::Asia 2011
      DEMO: PuTTYの実行画面
      高品質なことでは定評のあるシンプルシリーズを
      つくってみましょう。
    • 最近の開発とか
      YAPC::Asia 2011
      DEMO: PuTTYの実行画面
      シンプルシリーズの名を汚さぬよう精一杯頑張りました!
    • 最近の開発とか
      YAPC::Asia 2011
      DEMO: PuTTYの実行画面
      エラー
      鬼がアニメーションしながら追いかけてくる!
      そして鬼につかまると、エラーで停止しまう!
    • 簡単なゲームを作ってみるその2 プレイヤーの移動
      #!/usr/bin/envperl
      use Games::BeLike::EightBIT;
      my $stage = create_stage('stage1');
      my $plane = create_plane('stage1:main');
      my $player_bitmap = create_bitmap()->load_text("111n222n333");
      my $player = create_sprite({bitmaps => $player_bitmap, x=> 20, y=>10});
      $plane->add($player);
      $stage->keymap( {
      h => sub { $player->{x} -= 2 },
      l => sub { $player->{x} += 2 },
      j => sub { $player->{y} += 2 },
      k => sub { $player->{y} -= 2 },
      q => sub { $stage->exit; },
      });
      $stage->run;
      YAPC::Asia 2011
      適当なステージ名
      ステージ名:プレーン名
    • 簡単なゲームを作ってみるその3 敵キャラと当り判定
      #!/usr/bin/envperl
      use Games::BeLike::EightBIT;
      my $stage = create_stage( 'stage1', { debug => 1 } );
      my $plane = create_plane('stage1:main');
      my $player_bitmap = create_bitmap( undef, [ { x => 0, y => 0, w => 6, h => 3 } ] )
      ->load_text("111n222n333");
      my $player = create_sprite({ bitmaps => $player_bitmap, x => 20, y => 10, is_hit => 1 } );
      $player->on_hit( sub { $stage->exit; } );
      $plane->add($player);
      my $oni_bitmap = create_bitmap( undef, [ { x => 0, y => 0, w => 6, h => 3 } ] )
      ->load_text("444n555n666");
      my $oni = create_sprite( { bitmaps => $oni_bitmap, x => 40, y => 10, is_hit => 1 } );
      $plane->add($oni);
      キーマップは省略
      $stage->run;
      YAPC::Asia 2011
      当り判定領域
      当り判定ON
    • 簡単なゲームを作ってみるその4 敵キャラの移動
      $oni->animation(
      'moving',
      {
      type => 'custom',
      on_frame => sub {
      my ($sprite) = @_;
      my $dx = $player->{x} - $sprite->{x};
      my $dy = $player->{y} - $sprite->{y};
      my $d = sqrt $dx*$dx + $dy*$dy;
      my $vx = $dx/$d;
      my $vy = $dy/$d;
      $sprite->{x} += $vx;
      $sprite->{y} += $vy;
      },
      }
      )->play;
      YAPC::Asia 2011
      スプライト
      property, keyframe, custom
      かもしれない
      フレームごとのハンドラ
      プレイヤーを追いかける
    • 簡単なゲームを作ってみるその5 タイトルの追加1
      #!/usr/bin/envperl
      use Games::BeLike::EightBIT;
      while (1) {
      create_title()->run;
      create_stage1()->run;
      create_gameover()->run;
      }
      YAPC::Asia 2011
      無限ループにする
    • 簡単なゲームを作ってみるその5 タイトルの追加2
      sub create_title {
      # ステージとプレーン
      my $stage = create_stage( 'title', { debug => 1 } );
      my $plane = create_plane('title:main');
      # タイトル
      my $message = create_message({ message => 'The Onigokko', y => 15 } );
      $plane->add($message);
      $stage->keymap( { 'any' => sub { $stage->exit; }, } );
      return $stage;
      }
      YAPC::Asia 2011
      文字を描画したビットマップをセットしたスプライトを返す
    • 簡単なゲームを作ってみるその5 タイトルの追加3
      sub create_gameover {
      # ステージとプレーン
      my $stage = create_stage( 'title', { debug => 1 } );
      my $plane = create_plane('title:main');
      # タイトル
      my $message = create_message({ message => 'GAME OVER', y => 15 } );
      $plane->add($message);
      $stage->keymap( { 'any' => sub { $stage->exit; }, } );
      return $stage;
      }
      YAPC::Asia 2011
    • 簡単なゲームを作ってみるその5 タイトルの追加4
      sub create_stage1 {
      # ステージとプレーン
      my $stage = create_stage( 'stage1', { debug => 1 } );
      my $plane = create_plane('stage1:main');
      省略 ー さっきのメインプログラムがここに全部入る
      return $stage;
      }
      YAPC::Asia 2011
    • 簡単なゲームを作ってみるその6 画像を利用する1
      YAPC::Asia 2011
      画像はPNGで書き出したものを独自形式(gb8形式)に変換します。
      実績があるのは Fireworks ですが、通常のパターンエディタでも(PNG書き出しができれば)いけます。
      ゲームの実行ファイルのある場所に、images/ と patterns/ というフォルダを作成し、images に pngファイルを入れ、patterns に gb8 を書き出すのが推奨です。
    • 簡単なゲームを作ってみるその6 画像を利用する2
      sub create_title {
      # ステージとプレーン
      my $stage = create_stage( 'title', { debug => 1 } );
      my $plane = create_plane('title:main');
      # タイトル
      my $title = create_sprite(
      {
      bitmaps => create_bitmap('oni_title.gb8')
      }
      );
      $plane->add($title);
      $stage->keymap( { 'any' => sub { $stage->exit; }, } );
      return $stage;
      }
      YAPC::Asia 2011
      独自フォーマット
    • 簡単なゲームを作ってみるその6 画像を利用する3
      YAPC::Asia 2011
      • 1) ANSI の256色カラーテーブル作成
      • 同梱された mk_ansi_act.pl を実行し、act ファイルを作成する
      • 17番目の色を (0,0,0) ではなく(0,0,1)にし、透明色として利用している
    • 簡単なゲームを作ってみるその6 画像を利用する4
      YAPC::Asia 2011
      • 2) Fireworks で、一枚のPNGに、スプライトを書く
      • 適当なサイズのキャンパスを作成(800x600とか)
      • 前述の act ファイルを最適化パネルにロードする
      • 「未使用のカラーを削除する」のチェックを外す
      • 17番目の色(0,0,1)を透明に変更する
      • スウォッチを「現在の書き出しパレット」に変更する -> これでスポイトできるようになる
      • スウォッチを分離して拡大する
      • ウィンドウメニューで、「ウィンドウを複製」する
      • 複製されたウィンドウをドラッグし、別ウィンドウにして重ねる
      • 鉛筆ツールと消しゴムツールでパターンを描画する
    • 簡単なゲームを作ってみるその6 画像を利用する5
      YAPC::Asia 2011
      • 3) PNG8ビットで256色に最適化する
      • マットを透明に変更する
      • 透明は、インデックス透明カラーを利用する
      • 透明色を、17番目のカラーに変更されていることを確認する
      • 各キャラクタにスライスを切り、画像を書き出す
      • 4) GB8形式のバイナリデータに変換する
      • 同梱された png2gb8 を実行しする
      • png2gb8 –output pattern/ images/
    • 簡単なゲームを作ってみるその7 もっと複雑なゲームを作るには1
      YAPC::Asia 2011
      sub create_stage1 {
      my $stage = create_stage( 'stage1', { debug => 1 } );
      my $plane = create_plane('stage1:main');
      # プレイヤー
      my $player = Player->new;
      $plane->add($player);
      # 鬼
      my $oni = Oni->new;
      $plane->add($oni);
      # キーマップ
      $stage->keymap(
      {
      'h' => sub { $player->left; },
      'l' => sub { $player->right; },
      'j' => sub { $player->down; },
      'k' => sub { $player->up; },
      'q' => sub { $stage->exit; },
      }
      );
      return $stage;
      }
      継承クラスを作成して利用
      継承クラスを作成して利用
    • 簡単なゲームを作ってみるその7 もっと複雑なゲームを作るには2
      YAPC::Asia 2011
      package Oni;
      use base 'Games::BeLike::EightBIT::Sprite';
      use Games::BeLike::EightBIT;
      sub new {
      my ( $pkg, $args ) = @_;
      my $self = {
      name => 'oni',
      x => 450,
      y => 190,
      on_hit => &_on_hit,
      is_hit => 1,
      };
      $self = $pkg->SUPER::new($self);
      return $self;
      }
    • 簡単なゲームを作ってみるその7 もっと複雑なゲームを作るには3
      YAPC::Asia 2011
      sub _init_bitmap {
      my $hitareas = [ { x => 0, y => 0, w => 32, h => 16 } ];
      my @bitmaps = ();
      for my $index (1..3) {
      push @bitmaps, create_bitmap( "oni${index}.gb8", $hitareas);
      }
      return {
      default => [$bitmaps[0]],
      walking => [$bitmaps[2], @bitmaps],
      };
      }
      ハッシュを返す
    • 簡単なゲームを作ってみるその7 もっと複雑なゲームを作るには4
      YAPC::Asia 2011
      sub _init_animation {
      my ($self) = @_;
      $self->animation( 'walking‘, { duration => 0.5, repeat => 1 })->play;
      $self->animation( 'moving',
      {
      type => 'custom',
      on_frame => sub {
      my ($sprite) = @_;
      my $player = get_sprite('stage1:main:player');
      省略
      $sprite->{x} += $vx;
      $sprite->{y} += $vy;
      },
      }
      )->play;
      }
      1;
      walkingビットマップを勝手にアニメーションしてくれる
    • 今後の展望
      YAPC::Asia 2011
      テスト、ドキュメント、例外処理 -> cpanうp
      ゲーム開始時のシステムチェック(画面解像度、256色)
      line と paint を実装して、古くさい懐しいグラフィックを実現
      全方向のスクロール(実は今横スクロールしか作ってない)
      雛形作成用スクリプトの作成
      配布用スプリプトの作成(パッケージングしてくれるやつ)
      ひらがなとカタカナ、記号の表示(美咲フォントを組込予定)
      レベル(マップ)エディタへの対応
      RPGなどのゲームを作る際の便利な Util(吹き出しとか)
      公式サイトの開設(ゲーム紹介のポータルサイト)
      ネットワークとか?
      アニメーションのバリエーションを拡充(easein/outとか)
      年末の Advent Calendar あたりまでに何とかしたい
    • ご清聴ありがとうございました
      YAPC::Asia 2011