Submit Search
Upload
初心者向けJavaScript/HTML5ゲームプログラミング
•
4 likes
•
5,977 views
Kazuki Miyanishi
Follow
JavaScript/HTML5を用いたゲームプログラミングの解説
Read less
Read more
Internet
Report
Share
Report
Share
1 of 68
Download now
Download to read offline
Recommended
Webサイトに動きをつける、jQueryプラグインの設置方法 先生:田中 晶子
Webサイトに動きをつける、jQueryプラグインの設置方法 先生:田中 晶子
schoowebcampus
Web frontend performance tuning
Web frontend performance tuning
ssuser3c214d
レスポンシブ・イメージのWordPressへの実装と4.4
レスポンシブ・イメージのWordPressへの実装と4.4
Toru Miki
HTML5-20100626
HTML5-20100626
Taku AMANO
HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Hisateru Tanaka
HTML5 開発環境の紹介
HTML5 開発環境の紹介
tomo_masakura
Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)
Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)
KatsuyaENDOH
Recommended
Webサイトに動きをつける、jQueryプラグインの設置方法 先生:田中 晶子
Webサイトに動きをつける、jQueryプラグインの設置方法 先生:田中 晶子
schoowebcampus
Web frontend performance tuning
Web frontend performance tuning
ssuser3c214d
レスポンシブ・イメージのWordPressへの実装と4.4
レスポンシブ・イメージのWordPressへの実装と4.4
Toru Miki
HTML5-20100626
HTML5-20100626
Taku AMANO
HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Hisateru Tanaka
HTML5 開発環境の紹介
HTML5 開発環境の紹介
tomo_masakura
Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)
Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)
KatsuyaENDOH
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
Vue.js with Go
Vue.js with Go
Kazuhiro Kubota
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
Hayashi Yuichi
WebComponentsとPolymerを使ってみた
WebComponentsとPolymerを使ってみた
Nakazawa Yuichi
WordCamp Kansai 2015 CI ハンズオン
WordCamp Kansai 2015 CI ハンズオン
タカシ キタジマ
YARAIYA! Opendata with WordPress
YARAIYA! Opendata with WordPress
Hidetaka Okamoto
Looking glass + videoplayer
Looking glass + videoplayer
優介 黒河
久しぶりにWebエンジニアのためのプロジェクションマッピング
久しぶりにWebエンジニアのためのプロジェクションマッピング
KatsuyaENDOH
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
Erina Takei
ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発
schoowebcampus
[社内勉強会]Gradleを使おう
[社内勉強会]Gradleを使おう
hirooooo
JavaScriptフレームワーク入門にVue.jsはいかが?
JavaScriptフレームワーク入門にVue.jsはいかが?
好洋 山崎
Vue.js + WordPress
Vue.js + WordPress
Takahiro Kudo
ピピピのPWA
ピピピのPWA
Matsuo Obu
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
松田 千尋
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
Kitani Kimiya
Kwikをはじめるまえに
Kwikをはじめるまえに
Noriko Tanaka
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
Kohei Kadowaki
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Naoki Iwami
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
Yuuichi Akagawa
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
佐藤 俊太郎
More Related Content
What's hot
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
Vue.js with Go
Vue.js with Go
Kazuhiro Kubota
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
Hayashi Yuichi
WebComponentsとPolymerを使ってみた
WebComponentsとPolymerを使ってみた
Nakazawa Yuichi
WordCamp Kansai 2015 CI ハンズオン
WordCamp Kansai 2015 CI ハンズオン
タカシ キタジマ
YARAIYA! Opendata with WordPress
YARAIYA! Opendata with WordPress
Hidetaka Okamoto
Looking glass + videoplayer
Looking glass + videoplayer
優介 黒河
久しぶりにWebエンジニアのためのプロジェクションマッピング
久しぶりにWebエンジニアのためのプロジェクションマッピング
KatsuyaENDOH
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
Erina Takei
ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発
schoowebcampus
[社内勉強会]Gradleを使おう
[社内勉強会]Gradleを使おう
hirooooo
JavaScriptフレームワーク入門にVue.jsはいかが?
JavaScriptフレームワーク入門にVue.jsはいかが?
好洋 山崎
Vue.js + WordPress
Vue.js + WordPress
Takahiro Kudo
ピピピのPWA
ピピピのPWA
Matsuo Obu
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
松田 千尋
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
Kitani Kimiya
Kwikをはじめるまえに
Kwikをはじめるまえに
Noriko Tanaka
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
Kohei Kadowaki
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Naoki Iwami
What's hot
(20)
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
Vue.js with Go
Vue.js with Go
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
WebComponentsとPolymerを使ってみた
WebComponentsとPolymerを使ってみた
WordCamp Kansai 2015 CI ハンズオン
WordCamp Kansai 2015 CI ハンズオン
YARAIYA! Opendata with WordPress
YARAIYA! Opendata with WordPress
Looking glass + videoplayer
Looking glass + videoplayer
久しぶりにWebエンジニアのためのプロジェクションマッピング
久しぶりにWebエンジニアのためのプロジェクションマッピング
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発
[社内勉強会]Gradleを使おう
[社内勉強会]Gradleを使おう
JavaScriptフレームワーク入門にVue.jsはいかが?
JavaScriptフレームワーク入門にVue.jsはいかが?
Vue.js + WordPress
Vue.js + WordPress
ピピピのPWA
ピピピのPWA
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
スマホにおけるWebGL入門
スマホにおけるWebGL入門
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
Kwikをはじめるまえに
Kwikをはじめるまえに
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Similar to 初心者向けJavaScript/HTML5ゲームプログラミング
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
Yuuichi Akagawa
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
佐藤 俊太郎
2012 kanemotolablecture4
2012 kanemotolablecture4
ytanno
2014/12/13 第1回 Scala関西勉強会 play2-memcached supports Play 2.4 ~Play 2.4モジュールのつく...
2014/12/13 第1回 Scala関西勉強会 play2-memcached supports Play 2.4 ~Play 2.4モジュールのつく...
佑介 九岡
GCP vs 他社クラウド
GCP vs 他社クラウド
Hasegawa Yusuke
誰にでもできるパフォーマンスチューニング
誰にでもできるパフォーマンスチューニング
Kiyokazu Kaba
2010/8/27 TechEd2010 ライトニングトーク
2010/8/27 TechEd2010 ライトニングトーク
Sunao Tomita
WP-CLI (WordBench Sendai 20140628)
WP-CLI (WordBench Sendai 20140628)
Kazue Igarashi
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~
Microsoft Azure Japan
Ssaw08 1014
Ssaw08 1014
Atsushi Tadokoro
React NativeでTwitterクライアントを作ってみよう
React NativeでTwitterクライアントを作ってみよう
dcubeio
How to django at first
How to django at first
Maito Kuwahara
T119_5年間の試行錯誤で進化したMVPVMパターン
T119_5年間の試行錯誤で進化したMVPVMパターン
伸男 伊藤
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
Titanium勉強会
Titanium勉強会
洋平 前田
Web Workers
Web Workers
kaboccha
Jenkins+Play!で気軽にCI
Jenkins+Play!で気軽にCI
Takafumi Ikeda
vImageのススメ(改訂版)
vImageのススメ(改訂版)
Shuichi Tsutsumi
Unity に於ける iOS ビルド自動化のおはなし - 20141030 第26回 Unity 勉強会
Unity に於ける iOS ビルド自動化のおはなし - 20141030 第26回 Unity 勉強会
Mori Tetsuya
Scalaコーディングの準備
Scalaコーディングの準備
Yusuke Arakaki
Similar to 初心者向けJavaScript/HTML5ゲームプログラミング
(20)
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
2012 kanemotolablecture4
2012 kanemotolablecture4
2014/12/13 第1回 Scala関西勉強会 play2-memcached supports Play 2.4 ~Play 2.4モジュールのつく...
2014/12/13 第1回 Scala関西勉強会 play2-memcached supports Play 2.4 ~Play 2.4モジュールのつく...
GCP vs 他社クラウド
GCP vs 他社クラウド
誰にでもできるパフォーマンスチューニング
誰にでもできるパフォーマンスチューニング
2010/8/27 TechEd2010 ライトニングトーク
2010/8/27 TechEd2010 ライトニングトーク
WP-CLI (WordBench Sendai 20140628)
WP-CLI (WordBench Sendai 20140628)
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~
Ssaw08 1014
Ssaw08 1014
React NativeでTwitterクライアントを作ってみよう
React NativeでTwitterクライアントを作ってみよう
How to django at first
How to django at first
T119_5年間の試行錯誤で進化したMVPVMパターン
T119_5年間の試行錯誤で進化したMVPVMパターン
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Titanium勉強会
Titanium勉強会
Web Workers
Web Workers
Jenkins+Play!で気軽にCI
Jenkins+Play!で気軽にCI
vImageのススメ(改訂版)
vImageのススメ(改訂版)
Unity に於ける iOS ビルド自動化のおはなし - 20141030 第26回 Unity 勉強会
Unity に於ける iOS ビルド自動化のおはなし - 20141030 第26回 Unity 勉強会
Scalaコーディングの準備
Scalaコーディングの準備
初心者向けJavaScript/HTML5ゲームプログラミング
1.
初心者向け JavaScript/HTML5 ゲームプログラミング 2015年7月25日 #1.Study program of
dearness∼プログラミング勉強会∼ @zukkun
2.
自己紹介 • 北海道天塩町出身 • 先週、30歳になりました •
小学5年 プログラミングに目覚める (BASIC) • VisualBasic/VisualC++でDirectXで ゲームプログラミングして遊ぶ • ゲーム会社でプログラマとして5年過 ごした(主にC++) • 現在:システム開発会社に転職して 色々やってる @zukkun
3.
ゲームを作りたい!
4.
昔 • BASIC • RPGツクール •
HSP • DXライブラリ
5.
今 • Unity • Cocos2d-x •
UnrealEngine
6.
ここで新たな ゲームエンジンを紹介
7.
\ Webブラウザ /
8.
えっ?
9.
Webブラウザで動く ゲームの開発方法の紹介
10.
使用する言語 • HTML • JavaScript
11.
使用するツール • Webブラウザ • Google
Chrome • Mozilla Firefox など • テキストエディタ (Vimとか、Vimとか、Vimとか)
12.
フレームワークは?
13.
HTML5ゲームフレームワーク • Phaser • Impact •
CreateJS • enchant.js • melonJS • LimeJS • Kiwi.js • ……ほか多数(HTML5ゲームフレームワーク戦国時代)
14.
フレームワーク 開発を楽にする 学習を楽にする
15.
HTML JavaScript SceneGraph Sprite AnimationPhysics SpriteSheet TextureAtlas Particles Camera Input Sound Tilemap Device
Scaling Plugin 覚えなければいけないものが 山のように押し寄せる!
16.
初歩段階で フレームワークを導入すると 学習意欲に 致命的なダメージを与える
17.
フレームワークは 使いません
18.
フルスクラッチ
19.
フルスクラッチ 【 full scratch
】 • フルスクラッチとは、既存のものを一切流用せずにまったく 新規に開発すること。もとは模型の用語。 • システムやソフトウェアの開発において、パッケージ製品や 他のソフトのソースコード、雛形などを使用せず、ゼロから 開発していくことをスクラッチ開発というが、まったく何も 流用していないことを強調したいときにフルスクラッチとい う。 • フルスクラッチとは|full scratch - 意味/解説/説明/定義 : IT用語辞典 http://e-words.jp/フルスクラッチ.html
20.
HTML (index.html) <!DOCTYPE> <html> <head> <meta charset=“UTF-8”> <title>ゲーム</title> </head> <body> </body> </html>
21.
HTML (index.html) <!DOCTYPE> <html> <head> <meta charset=“UTF-8”> <title>ゲーム</title> </head> <body> <canvas
id=“main_canvas” width=“640px” height=“480px”> </canvas> </body> </html>
22.
HTML (index.html) <!DOCTYPE> <html> <head> <meta charset=“UTF-8”> <title>ゲーム</title> <script
src=“main.js”></script> </head> <body> <canvas id=“main_canvas” width=“640px” height=“480px”> </canvas> </body> </html>
23.
JavaScript (main.js) var canvas
= null; var ctx = null;
24.
JavaScript (main.js) var canvas
= null; var ctx = null; // 初期化 function init() { }
25.
JavaScript (main.js) var canvas
= null; var ctx = null; // 初期化 function init() { canvas = document.querySelector(‘#main_canvas’); // document.getElementByIdでも良い }
26.
JavaScript (main.js) var canvas
= null; var ctx = null; // 初期化 function init() { canvas = document.querySelector(‘#main_canvas’); ctx = canvas.getContext(‘2d’); }
27.
getContext( 2d )が返すもの CanvasRenderingContext2D https://developer.mozilla.org/ja/docs/Web/API/ CanvasRenderingContext2D
28.
JavaScript (main.js) var canvas
= null; var ctx = null; // 初期化 function init() { canvas = document.querySelector(‘#main_canvas’); ctx = canvas.getContext(‘2d’); } CanvasRenderingContext2D
29.
init関数を呼ぶ // init(); // いきなり呼び出すと、 //
HTML要素が構築される前に呼び出してしまう window.addEventListener(‘load’, init);
30.
init関数を呼ぶ // init(); // いきなり呼び出すと、 //
HTML要素が構築される前に呼び出してしまう window.addEventListener(‘load’, init); Functionオブジェクト
31.
画像を読み込む // 画像を読み込む function loadImage()
{ }
32.
画像を読み込む var image =
null; // 画像を読み込む function loadImage() { image = new Image(); }
33.
画像を読み込む // 画像を読み込む function loadImage()
{ image = new Image(); image.src = ‘box.png’; } box.png
34.
画像を読み込む // 画像を読み込む function loadImage()
{ image = new Image(); image.src = ‘box.png’; image.onload = function() { // 読み込み完了 }; }
35.
画像を読み込む // 画像を読み込む function loadImage()
{ image = new Image(); image.src = ‘box.png’; image.onload = function() { // 読み込み完了 }; } 標準で非同期読み込み!
36.
画像を読み込む // 画像を読み込む function loadImage(onComplete)
{ image = new Image(); image.src = ‘box.png’; image.onload = function() { // 読み込み完了 }; }
37.
画像を読み込む // 画像を読み込む function loadImage(onComplete)
{ image = new Image(); image.src = ‘box.png’; image.onload = function() { // 読み込み完了 onComplete(); }; }
38.
画像を読み込む function init() { : loadImage(); }
39.
画像を読み込む function init() { : loadImage(function()
{ // 画像読み込み完了後に行う処理 }); }
40.
更新処理と描画 function update() { render(); } function
render() { }
41.
画面をクリア function render() { //
画面をクリア // clearRect(X座標, Y座標, 幅, 高さ) ctx.clearRect( 0, 0, canvas.width, canvas.height); }
42.
画像の描画 function render() { //
画面をクリア ctx.clearRect( 0, 0, canvas.width, canvas.height); // drawImage(画像, X座標, Y座標) ctx.drawImage(image, 0, 0); }
43.
画像の描画 function render() { //
画面をクリア ctx.clearRect( 0, 0, canvas.width, canvas.height); // drawImage(画像, X座標, Y座標) ctx.drawImage(image, 0, 0); }
44.
updateしてみる function init() { : loadImage(function()
{ // 画像読み込み完了後に行う処理 update(); }); }
45.
実行してみる
46.
毎フレーム処理 function update() { window.requestAnimationFrame(update); render(); } 次回、描画タイミングで都合の良いタイミングで 関数を1度だけ呼び出してくれる (大抵の環境では60FPS)
47.
箱を動かしてみる // みかん箱のX座標 var boxX
= 0;
48.
箱を動かしてみる // みかん箱のX座標 var boxX
= 0; function update() { boxX += 1; render(); }
49.
箱を動かしてみる function render() { : ctx.drawImage(image,
boxX, 0); }
50.
実行してみる
51.
はい というような感じでですね
52.
Webブラウザで動く 少しゲームっぽいものを作る 初歩の紹介をしました
53.
Webブラウザで フルスクラッチでゲームを作って見る利点 • 昔のBASICでゲームを作るような 楽しさが味わえる • 書いたコードが すぐ実行できて楽しめる
54.
PCのブラウザでしか 動かないの?
55.
そんなことはありません • スマートフォンのブラウザでも Canvasは使えます • Cordovaというツールを使えば、 Android/iOS向けのアプリパッケージにして ストアで配信することも可能です
56.
実は今回は Webブラウザの魅力的な機能の 2%程度しか紹介できていない ※時間の都合上 ※当社比
57.
他に Webブラウザが標準で持つ 魅力的な機能を簡単に紹介
58.
Fullscreen API フルスクリーン表示!
59.
Gamepad API ゲームパッド入力!
60.
WebGL 3D表示!
61.
Web Audio API 遅延の少ない音声再生! 効果音に最適!
62.
Pointer Lock API マウスカーソルが無くなって マウスの動きの量だけ監視! 明らかに FPSゲーム向けだろこれ!
63.
Webブラウザには ゲーム向けと思われる 標準仕様の機能が 増えてきています ※そのうち物理演算も 標準で載るんじゃないかとか想像してます
64.
これは 各ブラウザベンダー またはWeb標準化団体からの
65.
「Web標準機能を使って ゲームを作りなさい」 我々に対する という要求です ※個人の解釈です
66.
ならば 受けて立ちましょう
67.
あなたも その一人になってみませんか?
68.
ご清聴ありがとうござました
Download now