• Save
Html5+javascriptでゲーム開発
Upcoming SlideShare
Loading in...5
×
 

Html5+javascriptでゲーム開発

on

  • 5,761 views

第9回山口県WEB勉強会で発表した資料です。

第9回山口県WEB勉強会で発表した資料です。

Statistics

Views

Total Views
5,761
Views on SlideShare
5,761
Embed Views
0

Actions

Likes
2
Downloads
0
Comments
0

0 Embeds 0

No embeds

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

    Html5+javascriptでゲーム開発 Html5+javascriptでゲーム開発 Presentation Transcript

    • HTML5+Javascriptでゲーム開発
    • 自己紹介
      gunsouといいます。
      山口県の某大学の大学院生です。
      研究したり、趣味でゲーム作ったりなんだり。
    • HTML5+Javascript
      HTML5になって、canvas要素が導入され、かなり簡単に、2次元画像が表示可能になりました。
      Javascriptと組み合わせることで、動的に画像を表示させることができます。
    • しかも
      canvas要素に対応しているブラウザなら何でもOK!!iPhone(Safari)などの
      スマートフォンでも動作可能!!
      ブラウザで動くのでOSを問わない。
       WindowsだろーがMacだろーが
       LinuxだろーがiPhoneだろーが
       Androidだろーがどんとこい。
    • これって…
      もしかして
      ゲーム作れるんじゃね?
    • ということで
      Javascriptでオブジェクト指向のクラス的な書き方できないかなーとWebを徘徊…
      すんなり発見(笑)
    • クラス(コンストラクタ)の作り方
      var Class名=function(コンストラクタの引数){
      this.メンバ変数=初期値
      }
      (ex:)
      var Position=funcution(x,y){
      this.x=x;
      this.y=y;
      }
    • メンバ関数の作り方
      Class名.prototype.関数名=function(引数){
      関数の中身
      }
      (ex:)
      Position.prototype.get_x=function(){
      return this.x;
      }
    • インスタンスの作り方
      変数=new クラス名(コンストラクタの引数);
      (ex:)
      var pos=new Position(100,20);
      pos.get_x(); //100が返される。
    • クラスの使い方がわかったので
      弾幕シューティングゲーム(っぽい何か)作成してみた。
      描画性能のベンチマークや、Javascriptにおけるオブジェクト指向の使い方の確認のために作っただけなんだからね!
      …嘘です弾幕シューティングゲーム好きだから作ったんです完全に趣味なんですごめんなさい。
    • こんなん
      http://nekotoast.sakura.ne.jp/webgame/stg/
    • わかったこと
      遅い。
    • わかったこと
      500個ぐらいのオブジェクト描画でお話にならないぐらいの処理落ちがかかる。
       FPSが若干不安定。(ブラウザ:firefox)
      スマートフォンでやると*お察しください*
    • どうやら…
      オブジェクトの描画しすぎ
      画像の拡大縮小・回転処理に時間がかかる
      (回転の方が処理が重い?ブラウザによりけり?)
      • 描画数が多いゲームは不向き。
      • 細かいアクション性を求められるゲームは不向き。
    • つまり弾幕シューティングゲームは
      むり。
      弾幕STGである怒首領蜂の
      最大弾描画数は255発だったはずだから、
      もうちょい切り詰めればできないことはなさそうだけど、
      FPSが不安定だから、結局難しいんだろうなぁ…
    • じゃあ、何のゲームが向いてそう?
      描画数が少なくて、アクション要素が
          そこそこなゲームが向いてるかも。
      ボードゲームとか、パズルゲームとか。
    • ある日の会話
      友「金魚すくいつくってよ」
      軍「金魚すくいのゲームとかww
           おもしろくならんだろwww」
      友「でもタップとかスライドとか金魚すくいのポイのすくう動きに似てね?」
      軍「なん…だと…?」
    • ビビっときた
      金魚すくいゲームを作ってみました。
      コンセプトは
      「老若男女どなたでも」
      タップで簡単に金魚がすくえる!!
      制限時間など、
      ゲームを急かすような
      ファクターは極力なくしています。
    • んで
      投稿しました!!
      http://9leap.net/
    • んでんで
      人気のゲーム1位になってます。*6月7日現在*
    • 終わりに
      HTML5+Javascriptを使い、オブジェクト指向でゲームプログラミングしてみました。
      enchant.jsという、ゲームプログラミング用ライブラリが公開されているみたいです。
      Javascriptということもあって、敷居が低いと思いますので、是非挑戦してみてはいかがでしょうか?
      いつか使いたいと思っていたあくあフォントが使えて大満足です。はい。
    • 終わり