SlideShare a Scribd company logo
1 of 19
Download to read offline
2014/3/23
日曜プログラマーが

1週間くらいで通信対戦ゲームを作ってみた
竹内 佑介
自己紹介
✤ 竹内 佑介!
✤ 日曜プログラマーです!
✤ RPGツクール、HSP、

クリック&クリエイト、

DXライブラリをいじってました!
✤ 最近はenchant.js + node.jsに

はまってます
通信対戦ゲームは敷居が高い?
✤ コンピュータ単体で動くゲームのノウハウは

沢山ありますね!
✤ でも、通信対戦ゲームの作り方となると途端に敷居が
高くなりますよね
そんなことはありません
✤ 便利なライブラリ・サービスを組み合わせれば、

日曜プログラマーでも1週間で通信対戦ゲーム

が作れます!
✤ 論より証拠ということで、まずはゲームをお見せします
ジャンケンゲームを作ってみました
http://janken-kaidouji85.herokuapp.com/
動画デモも公開しています
https://www.youtube.com/watch?v=1_ukdCUcw-Q
ゲーム作成期間とか
✤ 作成期間 1週間

->プロトタイプ作成 4日、ブラッシュアップ 3日

->日曜プログラマーだから1日1日の感覚は結構多いん
だけどね!
✤ 行数は全部で500行程度

->行数はサーバとクライアントで大体半々くらいです
作り方を少しだけ紹介します
✤ どうやって累計1週間で通信対戦ゲームを作ったのか
少しだけノウハウを共有させて頂きます!
✤ まずは通信対戦ゲーム作りで壁になるところを

リストアップします
通信対戦ゲーム作成の課題
1. ゲームプログラムてどう作るの?!
2. 通信プログラムってどう書くの?!
3. サーバとゲーム画面の通信は、

どういう仕組みでやればいいの?!
4. ゲームをネットに公開するのはどうやるの?
1. ゲームプログラミング
✤ ゲーム画面作成にはenchant.jsを使います!
✤ ネット上の日本語のノウハウが多く、入門本も

沢山あります!
✤ http://enchantjs.com/ja/
2. 通信プログラム
✤ node.js + socket.ioで超簡単に通信プログラムが

書けます!
✤ BASICとかHSP感覚で通信プログラムが作れます!
✤ これもノウハウが多いですし、公式ページが驚くほど
分かりやすいです!
✤ http://socket.io/#how-to-use
3. 通信ロジック①
✤ ここまでで、ゲーム画面、通信プログラムが作れるよ
うになります!
✤ しかし、サーバ・クライアント間で同期をとる方法を
考える必要があります
サーバ
クライ

アント
ゲームロジック実行
結果に応じた

ゲーム画面表示
コマンド送信
ゲーム判定結果送信
3. 通信ロジック②
サーバ  :  ゲームの処理を実行する!
クライアント: ゲームの結果を表示!
プレイヤーのコマンドをサーバに送信
4. サービス公開方法
✤ herokuとかを使えば簡単にサービス公開できます!
✤ デプロイは1コマンドでOK

例)git push heroku master!
✤ しかも5アプリまでなら無料で公開可能です!
✤ https://id.heroku.com/

もっと詳しく知りたい方は
✤ ソースコードをgithubに公開しているので、是非アク
セスしてみて下さい!
✤ https://github.com/kaidouji85/janken
応用すればスゴいゲームも作れるかも
✤ ジャンケンゲームで一通りサーバ・クライアント間通
信はできました!
✤ あとはこれを少し複雑にしたり、積み上げたりすれば、
より複雑なゲームを作ることも可能です!
✤ 実はジャンケンゲームを元に、通信対戦PRGを作って
ます
ジャンケンゲームの応用でこんなん作ってます
✤ ジャンケンゲームの応用で通信対戦PRGを作ってます!
✤ 近況は、ブログで順次お伝えします
ブログもやってます
✤ ブログもやってます!
✤ 通信対戦プログラムの解説なども順次掲載するつもり
です!
✤ 毎日プログラム

http://blog.livedoor.jp/kaidouji85/
ご清聴ありがとうございました

More Related Content

What's hot

ゲームサーバ開発現場の考え方
ゲームサーバ開発現場の考え方ゲームサーバ開発現場の考え方
ゲームサーバ開発現場の考え方
Daisaku Mochizuki
 
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築するピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
Takahito Tejima
 
Observable Everywhere - Rxの原則とUniRxにみるデータソースの見つけ方
Observable Everywhere  - Rxの原則とUniRxにみるデータソースの見つけ方Observable Everywhere  - Rxの原則とUniRxにみるデータソースの見つけ方
Observable Everywhere - Rxの原則とUniRxにみるデータソースの見つけ方
Yoshifumi Kawai
 

What's hot (20)

ゲームサーバ開発現場の考え方
ゲームサーバ開発現場の考え方ゲームサーバ開発現場の考え方
ゲームサーバ開発現場の考え方
 
FINAL FANTASY XVにおけるPhoton利用事例 - Photon運営事務局 GTMF 2018 OSAKA / TOKYO
FINAL FANTASY XVにおけるPhoton利用事例 - Photon運営事務局 GTMF 2018 OSAKA / TOKYOFINAL FANTASY XVにおけるPhoton利用事例 - Photon運営事務局 GTMF 2018 OSAKA / TOKYO
FINAL FANTASY XVにおけるPhoton利用事例 - Photon運営事務局 GTMF 2018 OSAKA / TOKYO
 
サーバー知識不要!のゲームサーバー "Azure PlayFab" で長期運営タイトルを作ろう
サーバー知識不要!のゲームサーバー "Azure PlayFab" で長期運営タイトルを作ろうサーバー知識不要!のゲームサーバー "Azure PlayFab" で長期運営タイトルを作ろう
サーバー知識不要!のゲームサーバー "Azure PlayFab" で長期運営タイトルを作ろう
 
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
 
MagicOnion入門
MagicOnion入門MagicOnion入門
MagicOnion入門
 
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
 
「スプラトゥーン」リアルタイム画像解析ツール 「IkaLog」の裏側
「スプラトゥーン」リアルタイム画像解析ツール 「IkaLog」の裏側「スプラトゥーン」リアルタイム画像解析ツール 「IkaLog」の裏側
「スプラトゥーン」リアルタイム画像解析ツール 「IkaLog」の裏側
 
Building the Game Server both API and Realtime via c#
Building the Game Server both API and Realtime via c#Building the Game Server both API and Realtime via c#
Building the Game Server both API and Realtime via c#
 
FINAL FANTASY Record Keeperのマスターデータを支える技術
FINAL FANTASY Record Keeperのマスターデータを支える技術FINAL FANTASY Record Keeperのマスターデータを支える技術
FINAL FANTASY Record Keeperのマスターデータを支える技術
 
カード収集ゲームにおけるPlayFabの使い方
カード収集ゲームにおけるPlayFabの使い方カード収集ゲームにおけるPlayFabの使い方
カード収集ゲームにおけるPlayFabの使い方
 
Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法
Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法
Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法
 
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築するピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
 
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
 
点群を使いこなせ! 可視化なんて当たり前、xRと点群を組み合わせたUnityの世界 【Interact , Stipple】
点群を使いこなせ! 可視化なんて当たり前、xRと点群を組み合わせたUnityの世界 【Interact , Stipple】点群を使いこなせ! 可視化なんて当たり前、xRと点群を組み合わせたUnityの世界 【Interact , Stipple】
点群を使いこなせ! 可視化なんて当たり前、xRと点群を組み合わせたUnityの世界 【Interact , Stipple】
 
UnityのMultiplayサービスの得意な事
UnityのMultiplayサービスの得意な事UnityのMultiplayサービスの得意な事
UnityのMultiplayサービスの得意な事
 
【Unity】 Behavior TreeでAIを作る
 【Unity】 Behavior TreeでAIを作る 【Unity】 Behavior TreeでAIを作る
【Unity】 Behavior TreeでAIを作る
 
MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~
 
【Unity道場 2017】PlayMakerによる初めてのUnityプログラミング
【Unity道場 2017】PlayMakerによる初めてのUnityプログラミング【Unity道場 2017】PlayMakerによる初めてのUnityプログラミング
【Unity道場 2017】PlayMakerによる初めてのUnityプログラミング
 
究極のゲーム用通信プロトコル “WebRTC”
究極のゲーム用通信プロトコル “WebRTC”究極のゲーム用通信プロトコル “WebRTC”
究極のゲーム用通信プロトコル “WebRTC”
 
Observable Everywhere - Rxの原則とUniRxにみるデータソースの見つけ方
Observable Everywhere  - Rxの原則とUniRxにみるデータソースの見つけ方Observable Everywhere  - Rxの原則とUniRxにみるデータソースの見つけ方
Observable Everywhere - Rxの原則とUniRxにみるデータソースの見つけ方
 

Similar to 日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた

横浜国立大学PCサークルSCITEXの活動 in SGF2012
横浜国立大学PCサークルSCITEXの活動 in SGF2012横浜国立大学PCサークルSCITEXの活動 in SGF2012
横浜国立大学PCサークルSCITEXの活動 in SGF2012
Tomoki Suzuki
 

Similar to 日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた (20)

Unity講座資料 共通
Unity講座資料 共通Unity講座資料 共通
Unity講座資料 共通
 
JS と Canvas で作るシューティングゲーム
JS と Canvas で作るシューティングゲームJS と Canvas で作るシューティングゲーム
JS と Canvas で作るシューティングゲーム
 
GalaxyShooter.pdf
GalaxyShooter.pdfGalaxyShooter.pdf
GalaxyShooter.pdf
 
【 #Unity会 】このUnityがすごい2015年版
【 #Unity会 】このUnityがすごい2015年版【 #Unity会 】このUnityがすごい2015年版
【 #Unity会 】このUnityがすごい2015年版
 
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみたゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
 
enchant.jsを使った子ども向けプログラミングワークショップ講義内容
enchant.jsを使った子ども向けプログラミングワークショップ講義内容enchant.jsを使った子ども向けプログラミングワークショップ講義内容
enchant.jsを使った子ども向けプログラミングワークショップ講義内容
 
エターナらないゲーム開発
エターナらないゲーム開発エターナらないゲーム開発
エターナらないゲーム開発
 
Enchant.js入門
Enchant.js入門Enchant.js入門
Enchant.js入門
 
rogyゼミ第2回 ニックさん
rogyゼミ第2回 ニックさんrogyゼミ第2回 ニックさん
rogyゼミ第2回 ニックさん
 
Herlockサービス紹介
Herlockサービス紹介Herlockサービス紹介
Herlockサービス紹介
 
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 1
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 1苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 1
苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 1
 
Service a week したさあるよな?
Service a week したさあるよな?Service a week したさあるよな?
Service a week したさあるよな?
 
「自分のとこでは動くけど…」を無くす devcontainer
「自分のとこでは動くけど…」を無くす devcontainer「自分のとこでは動くけど…」を無くす devcontainer
「自分のとこでは動くけど…」を無くす devcontainer
 
同人ゲームサークルの1プログラマとしての過去・現在・未来
同人ゲームサークルの1プログラマとしての過去・現在・未来同人ゲームサークルの1プログラマとしての過去・現在・未来
同人ゲームサークルの1プログラマとしての過去・現在・未来
 
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしようNode.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしよう
 
C#への招待
C#への招待C#への招待
C#への招待
 
本になりました! ~ チーム開発の教科書 C#によるモダンな開発を実践しよう!
本になりました! ~ チーム開発の教科書 C#によるモダンな開発を実践しよう!本になりました! ~ チーム開発の教科書 C#によるモダンな開発を実践しよう!
本になりました! ~ チーム開発の教科書 C#によるモダンな開発を実践しよう!
 
横浜国立大学PCサークルSCITEXの活動 in SGF2012
横浜国立大学PCサークルSCITEXの活動 in SGF2012横浜国立大学PCサークルSCITEXの活動 in SGF2012
横浜国立大学PCサークルSCITEXの活動 in SGF2012
 
ARLT_10_Unityと昔のAR会
ARLT_10_Unityと昔のAR会ARLT_10_Unityと昔のAR会
ARLT_10_Unityと昔のAR会
 
(業務外)ゲーム制作部のススメ
(業務外)ゲーム制作部のススメ(業務外)ゲーム制作部のススメ
(業務外)ゲーム制作部のススメ
 

More from Yuusuke Takeuchi

Passportでサクッと外部認証を組み込もう
Passportでサクッと外部認証を組み込もうPassportでサクッと外部認証を組み込もう
Passportでサクッと外部認証を組み込もう
Yuusuke Takeuchi
 
Gブレイバー1人用モード開発案
Gブレイバー1人用モード開発案Gブレイバー1人用モード開発案
Gブレイバー1人用モード開発案
Yuusuke Takeuchi
 
Html5の通信対戦ゲームをテスト駆動開発で作ってみた
Html5の通信対戦ゲームをテスト駆動開発で作ってみたHtml5の通信対戦ゲームをテスト駆動開発で作ってみた
Html5の通信対戦ゲームをテスト駆動開発で作ってみた
Yuusuke Takeuchi
 
Gブレイバー開発計画3スプリント目
Gブレイバー開発計画3スプリント目Gブレイバー開発計画3スプリント目
Gブレイバー開発計画3スプリント目
Yuusuke Takeuchi
 
Gブレイバー開発計画 2スプリント目
Gブレイバー開発計画 2スプリント目Gブレイバー開発計画 2スプリント目
Gブレイバー開発計画 2スプリント目
Yuusuke Takeuchi
 
テスト駆動ゲーム開発をJava scriptで実践 in jscafe20
テスト駆動ゲーム開発をJava scriptで実践  in jscafe20テスト駆動ゲーム開発をJava scriptで実践  in jscafe20
テスト駆動ゲーム開発をJava scriptで実践 in jscafe20
Yuusuke Takeuchi
 
テスト駆動ゲーム開発をJava scriptで実践
テスト駆動ゲーム開発をJava scriptで実践テスト駆動ゲーム開発をJava scriptで実践
テスト駆動ゲーム開発をJava scriptで実践
Yuusuke Takeuchi
 
Gブレイバーのことれからとこの先
Gブレイバーのことれからとこの先Gブレイバーのことれからとこの先
Gブレイバーのことれからとこの先
Yuusuke Takeuchi
 
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
Yuusuke Takeuchi
 
日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生
Yuusuke Takeuchi
 
Node.jsなら日曜プログラマーでも簡単に通信対戦ゲームが作れる
Node.jsなら日曜プログラマーでも簡単に通信対戦ゲームが作れるNode.jsなら日曜プログラマーでも簡単に通信対戦ゲームが作れる
Node.jsなら日曜プログラマーでも簡単に通信対戦ゲームが作れる
Yuusuke Takeuchi
 

More from Yuusuke Takeuchi (19)

Reduxについて
ReduxについてReduxについて
Reduxについて
 
自作ゲームをWebpack対応させてみた
自作ゲームをWebpack対応させてみた自作ゲームをWebpack対応させてみた
自作ゲームをWebpack対応させてみた
 
本職のプログラマーが趣味で対戦ゲーム作ってみた Part10
本職のプログラマーが趣味で対戦ゲーム作ってみた Part10本職のプログラマーが趣味で対戦ゲーム作ってみた Part10
本職のプログラマーが趣味で対戦ゲーム作ってみた Part10
 
ゲームの自動テストを 作ってみた
ゲームの自動テストを 作ってみたゲームの自動テストを 作ってみた
ゲームの自動テストを 作ってみた
 
Passportでサクッと外部認証を組み込もう
Passportでサクッと外部認証を組み込もうPassportでサクッと外部認証を組み込もう
Passportでサクッと外部認証を組み込もう
 
春のJs祭2015 lt
春のJs祭2015 lt春のJs祭2015 lt
春のJs祭2015 lt
 
Node.jsで対戦ゲーム作ったよ
Node.jsで対戦ゲーム作ったよNode.jsで対戦ゲーム作ったよ
Node.jsで対戦ゲーム作ったよ
 
Gブレイバー1人用モード開発案
Gブレイバー1人用モード開発案Gブレイバー1人用モード開発案
Gブレイバー1人用モード開発案
 
東京Node学園祭2014 飛び入りLT
東京Node学園祭2014 飛び入りLT東京Node学園祭2014 飛び入りLT
東京Node学園祭2014 飛び入りLT
 
2014年上期Gブレイバー振り返り
2014年上期Gブレイバー振り返り2014年上期Gブレイバー振り返り
2014年上期Gブレイバー振り返り
 
Html5の通信対戦ゲームをテスト駆動開発で作ってみた
Html5の通信対戦ゲームをテスト駆動開発で作ってみたHtml5の通信対戦ゲームをテスト駆動開発で作ってみた
Html5の通信対戦ゲームをテスト駆動開発で作ってみた
 
Gブレイバー開発計画3スプリント目
Gブレイバー開発計画3スプリント目Gブレイバー開発計画3スプリント目
Gブレイバー開発計画3スプリント目
 
Gブレイバー開発計画 2スプリント目
Gブレイバー開発計画 2スプリント目Gブレイバー開発計画 2スプリント目
Gブレイバー開発計画 2スプリント目
 
テスト駆動ゲーム開発をJava scriptで実践 in jscafe20
テスト駆動ゲーム開発をJava scriptで実践  in jscafe20テスト駆動ゲーム開発をJava scriptで実践  in jscafe20
テスト駆動ゲーム開発をJava scriptで実践 in jscafe20
 
テスト駆動ゲーム開発をJava scriptで実践
テスト駆動ゲーム開発をJava scriptで実践テスト駆動ゲーム開発をJava scriptで実践
テスト駆動ゲーム開発をJava scriptで実践
 
Gブレイバーのことれからとこの先
Gブレイバーのことれからとこの先Gブレイバーのことれからとこの先
Gブレイバーのことれからとこの先
 
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
 
日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生
 
Node.jsなら日曜プログラマーでも簡単に通信対戦ゲームが作れる
Node.jsなら日曜プログラマーでも簡単に通信対戦ゲームが作れるNode.jsなら日曜プログラマーでも簡単に通信対戦ゲームが作れる
Node.jsなら日曜プログラマーでも簡単に通信対戦ゲームが作れる
 

日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた