Submit Search
Upload
HTML5 ゲームフレームワーク開発について
•
3 likes
•
9,875 views
Drecom Co., Ltd.
Follow
2019/6/17 に開催された「HTML5 ゲームを支える技術勉強会」の登壇資料です。
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 48
Download now
Download to read offline
Recommended
VRM 標準シェーダ MToon の使い方
VRM 標準シェーダ MToon の使い方
VirtualCast, Inc.
ヒストリア HelixCore(Perforce) 運用レギュレーションドキュメント
ヒストリア HelixCore(Perforce) 運用レギュレーションドキュメント
historia_Inc
超連射68K 開発日記 -弾幕世代以前の90年代 STG のこと-
超連射68K 開発日記 -弾幕世代以前の90年代 STG のこと-
IGDA Japan
第2部 自作ライブラリ紹介
第2部 自作ライブラリ紹介
らりお ザ・何とは言わない天然水ソムリエ
Cinemachineで見下ろし視点のカメラを作る
Cinemachineで見下ろし視点のカメラを作る
Unity Technologies Japan K.K.
[CEDEC2018] UE4アニメーションシステム総おさらい
[CEDEC2018] UE4アニメーションシステム総おさらい
エピック・ゲームズ・ジャパン Epic Games Japan
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
Unity Technologies Japan K.K.
UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~
UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~
エピック・ゲームズ・ジャパン Epic Games Japan
Recommended
VRM 標準シェーダ MToon の使い方
VRM 標準シェーダ MToon の使い方
VirtualCast, Inc.
ヒストリア HelixCore(Perforce) 運用レギュレーションドキュメント
ヒストリア HelixCore(Perforce) 運用レギュレーションドキュメント
historia_Inc
超連射68K 開発日記 -弾幕世代以前の90年代 STG のこと-
超連射68K 開発日記 -弾幕世代以前の90年代 STG のこと-
IGDA Japan
第2部 自作ライブラリ紹介
第2部 自作ライブラリ紹介
らりお ザ・何とは言わない天然水ソムリエ
Cinemachineで見下ろし視点のカメラを作る
Cinemachineで見下ろし視点のカメラを作る
Unity Technologies Japan K.K.
[CEDEC2018] UE4アニメーションシステム総おさらい
[CEDEC2018] UE4アニメーションシステム総おさらい
エピック・ゲームズ・ジャパン Epic Games Japan
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
Unity Technologies Japan K.K.
UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~
UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~
エピック・ゲームズ・ジャパン Epic Games Japan
ソーシャルゲーム運用チームにJIRAを導入してみた話
ソーシャルゲーム運用チームにJIRAを導入してみた話
Kimura Ryota
F.E.A.Rにおけるゴール指向プランニング
F.E.A.Rにおけるゴール指向プランニング
Youichiro Miyake
IncrediBuildでビルド時間を最大90%短縮! - インクレディビルドジャパン株式会社 - GTMF 2018 TOKYO
IncrediBuildでビルド時間を最大90%短縮! - インクレディビルドジャパン株式会社 - GTMF 2018 TOKYO
Game Tools & Middleware Forum
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
SEGADevTech
サーバー知識不要!のゲームサーバー "Azure PlayFab" で長期運営タイトルを作ろう
サーバー知識不要!のゲームサーバー "Azure PlayFab" で長期運営タイトルを作ろう
Daisuke Masubuchi
MRU : Monobit Reliable UDP ~5G世代のモバイルゲームに最適な通信プロトコルを目指して~
MRU : Monobit Reliable UDP ~5G世代のモバイルゲームに最適な通信プロトコルを目指して~
モノビット エンジン
【UE4.25 新機能】ロードの高速化機能「IOStore」について
【UE4.25 新機能】ロードの高速化機能「IOStore」について
エピック・ゲームズ・ジャパン Epic Games Japan
Fbx解説 (1 構文編) (1)
Fbx解説 (1 構文編) (1)
らりお ザ・何とは言わない天然水ソムリエ
60fpsアクションを実現する秘訣を伝授 基礎編
60fpsアクションを実現する秘訣を伝授 基礎編
エピック・ゲームズ・ジャパン Epic Games Japan
攻略リニアカラー改訂版
攻略リニアカラー改訂版
小林 信行
UE4モバイルブートキャンプ
UE4モバイルブートキャンプ
エピック・ゲームズ・ジャパン Epic Games Japan
ゲームの仕様書を書こう4 仕様書作成で楽をするconfluenceの活用
ゲームの仕様書を書こう4 仕様書作成で楽をするconfluenceの活用
Sugimoto Chizuru
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
UnityTechnologiesJapan002
規格書で読むC++11のスレッド
規格書で読むC++11のスレッド
Kohsuke Yuasa
Hieraテクニック - 効率的にパラメータシートから設定値を取り込む - 横山 浩輔、株式会社NTTデータ
Hieraテクニック - 効率的にパラメータシートから設定値を取り込む - 横山 浩輔、株式会社NTTデータ
Puppet
UE4におけるエフェクトの為のエンジン改造事例
UE4におけるエフェクトの為のエンジン改造事例
エピック・ゲームズ・ジャパン Epic Games Japan
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
小林 信行
60fpsアクションを実現する秘訣を伝授 解析編
60fpsアクションを実現する秘訣を伝授 解析編
エピック・ゲームズ・ジャパン Epic Games Japan
UE4のスレッドの流れとInput Latency改善の仕組み
UE4のスレッドの流れとInput Latency改善の仕組み
エピック・ゲームズ・ジャパン Epic Games Japan
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
Takahito Tejima
VRの浸透と、 最適なUXの為に気をつけたいこと。
VRの浸透と、 最適なUXの為に気をつけたいこと。
Tomoyo Hirayama
第5回業開中心会議
第5回業開中心会議
Kaoru NAKAMURA
More Related Content
What's hot
ソーシャルゲーム運用チームにJIRAを導入してみた話
ソーシャルゲーム運用チームにJIRAを導入してみた話
Kimura Ryota
F.E.A.Rにおけるゴール指向プランニング
F.E.A.Rにおけるゴール指向プランニング
Youichiro Miyake
IncrediBuildでビルド時間を最大90%短縮! - インクレディビルドジャパン株式会社 - GTMF 2018 TOKYO
IncrediBuildでビルド時間を最大90%短縮! - インクレディビルドジャパン株式会社 - GTMF 2018 TOKYO
Game Tools & Middleware Forum
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
SEGADevTech
サーバー知識不要!のゲームサーバー "Azure PlayFab" で長期運営タイトルを作ろう
サーバー知識不要!のゲームサーバー "Azure PlayFab" で長期運営タイトルを作ろう
Daisuke Masubuchi
MRU : Monobit Reliable UDP ~5G世代のモバイルゲームに最適な通信プロトコルを目指して~
MRU : Monobit Reliable UDP ~5G世代のモバイルゲームに最適な通信プロトコルを目指して~
モノビット エンジン
【UE4.25 新機能】ロードの高速化機能「IOStore」について
【UE4.25 新機能】ロードの高速化機能「IOStore」について
エピック・ゲームズ・ジャパン Epic Games Japan
Fbx解説 (1 構文編) (1)
Fbx解説 (1 構文編) (1)
らりお ザ・何とは言わない天然水ソムリエ
60fpsアクションを実現する秘訣を伝授 基礎編
60fpsアクションを実現する秘訣を伝授 基礎編
エピック・ゲームズ・ジャパン Epic Games Japan
攻略リニアカラー改訂版
攻略リニアカラー改訂版
小林 信行
UE4モバイルブートキャンプ
UE4モバイルブートキャンプ
エピック・ゲームズ・ジャパン Epic Games Japan
ゲームの仕様書を書こう4 仕様書作成で楽をするconfluenceの活用
ゲームの仕様書を書こう4 仕様書作成で楽をするconfluenceの活用
Sugimoto Chizuru
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
UnityTechnologiesJapan002
規格書で読むC++11のスレッド
規格書で読むC++11のスレッド
Kohsuke Yuasa
Hieraテクニック - 効率的にパラメータシートから設定値を取り込む - 横山 浩輔、株式会社NTTデータ
Hieraテクニック - 効率的にパラメータシートから設定値を取り込む - 横山 浩輔、株式会社NTTデータ
Puppet
UE4におけるエフェクトの為のエンジン改造事例
UE4におけるエフェクトの為のエンジン改造事例
エピック・ゲームズ・ジャパン Epic Games Japan
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
小林 信行
60fpsアクションを実現する秘訣を伝授 解析編
60fpsアクションを実現する秘訣を伝授 解析編
エピック・ゲームズ・ジャパン Epic Games Japan
UE4のスレッドの流れとInput Latency改善の仕組み
UE4のスレッドの流れとInput Latency改善の仕組み
エピック・ゲームズ・ジャパン Epic Games Japan
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
Takahito Tejima
What's hot
(20)
ソーシャルゲーム運用チームにJIRAを導入してみた話
ソーシャルゲーム運用チームにJIRAを導入してみた話
F.E.A.Rにおけるゴール指向プランニング
F.E.A.Rにおけるゴール指向プランニング
IncrediBuildでビルド時間を最大90%短縮! - インクレディビルドジャパン株式会社 - GTMF 2018 TOKYO
IncrediBuildでビルド時間を最大90%短縮! - インクレディビルドジャパン株式会社 - GTMF 2018 TOKYO
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
サーバー知識不要!のゲームサーバー "Azure PlayFab" で長期運営タイトルを作ろう
サーバー知識不要!のゲームサーバー "Azure PlayFab" で長期運営タイトルを作ろう
MRU : Monobit Reliable UDP ~5G世代のモバイルゲームに最適な通信プロトコルを目指して~
MRU : Monobit Reliable UDP ~5G世代のモバイルゲームに最適な通信プロトコルを目指して~
【UE4.25 新機能】ロードの高速化機能「IOStore」について
【UE4.25 新機能】ロードの高速化機能「IOStore」について
Fbx解説 (1 構文編) (1)
Fbx解説 (1 構文編) (1)
60fpsアクションを実現する秘訣を伝授 基礎編
60fpsアクションを実現する秘訣を伝授 基礎編
攻略リニアカラー改訂版
攻略リニアカラー改訂版
UE4モバイルブートキャンプ
UE4モバイルブートキャンプ
ゲームの仕様書を書こう4 仕様書作成で楽をするconfluenceの活用
ゲームの仕様書を書こう4 仕様書作成で楽をするconfluenceの活用
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
規格書で読むC++11のスレッド
規格書で読むC++11のスレッド
Hieraテクニック - 効率的にパラメータシートから設定値を取り込む - 横山 浩輔、株式会社NTTデータ
Hieraテクニック - 効率的にパラメータシートから設定値を取り込む - 横山 浩輔、株式会社NTTデータ
UE4におけるエフェクトの為のエンジン改造事例
UE4におけるエフェクトの為のエンジン改造事例
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
60fpsアクションを実現する秘訣を伝授 解析編
60fpsアクションを実現する秘訣を伝授 解析編
UE4のスレッドの流れとInput Latency改善の仕組み
UE4のスレッドの流れとInput Latency改善の仕組み
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
Similar to HTML5 ゲームフレームワーク開発について
VRの浸透と、 最適なUXの為に気をつけたいこと。
VRの浸透と、 最適なUXの為に気をつけたいこと。
Tomoyo Hirayama
第5回業開中心会議
第5回業開中心会議
Kaoru NAKAMURA
Delphi Debut Tokyo #1 - FireMonkey HD の基本
Delphi Debut Tokyo #1 - FireMonkey HD の基本
Jun Hosokawa
Gcm#3 vr project making of サラと毒蛇の王冠
Gcm#3 vr project making of サラと毒蛇の王冠
GREE/Art
Regional Scrum Gathering Tokyo 2023 Keiji Kikuchi Remote Mobbing
Regional Scrum Gathering Tokyo 2023 Keiji Kikuchi Remote Mobbing
Keiji Kikuchi
KinectやRealSenseの概要とさまざまな使い方
KinectやRealSenseの概要とさまざまな使い方
Kaoru NAKAMURA
いま注目のセンサー&デバイス
いま注目のセンサー&デバイス
Kaoru NAKAMURA
Delphi Community Edition Meet up !
Delphi Community Edition Meet up !
Jun Hosokawa
大規模SNSにおけるソーシャルアプリの運用とマネタイズ
大規模SNSにおけるソーシャルアプリの運用とマネタイズ
youthk kamiya
ジェスチャ認識・物体形状取得がもたらす新たな未来
ジェスチャ認識・物体形状取得がもたらす新たな未来
Kaoru NAKAMURA
Terraform with Bitbucket pipeline
Terraform with Bitbucket pipeline
Masatomo Ito
UX on HTML5 x Touch UI
UX on HTML5 x Touch UI
dsuke Takaoka
少人数でも新規事業を成功させるために意識している3つのこと
少人数でも新規事業を成功させるために意識している3つのこと
光典 小川
What's TMCN?
What's TMCN?
Yukihiro Kimura
「デモリッションロボッツK.K.」のGenvidインティグレート事例
「デモリッションロボッツK.K.」のGenvidインティグレート事例
Takaaki Ichijo
UnityとnodeとMMDと
UnityとnodeとMMDと
sters
非ゲーム業界のデザイナーが CEDECに参加してきた
非ゲーム業界のデザイナーが CEDECに参加してきた
Meyco U
【Unite 2018 Tokyo】Windows Mixed Reality 最新アプリ開発情報 ~HoloLens からVRまで~
【Unite 2018 Tokyo】Windows Mixed Reality 最新アプリ開発情報 ~HoloLens からVRまで~
UnityTechnologiesJapan002
Dev(ice)love デバイス祭り
Dev(ice)love デバイス祭り
Kaoru NAKAMURA
20120416 3年後のeラーニング予想大会 中嶋さん
20120416 3年後のeラーニング予想大会 中嶋さん
Visso株式会社
Similar to HTML5 ゲームフレームワーク開発について
(20)
VRの浸透と、 最適なUXの為に気をつけたいこと。
VRの浸透と、 最適なUXの為に気をつけたいこと。
第5回業開中心会議
第5回業開中心会議
Delphi Debut Tokyo #1 - FireMonkey HD の基本
Delphi Debut Tokyo #1 - FireMonkey HD の基本
Gcm#3 vr project making of サラと毒蛇の王冠
Gcm#3 vr project making of サラと毒蛇の王冠
Regional Scrum Gathering Tokyo 2023 Keiji Kikuchi Remote Mobbing
Regional Scrum Gathering Tokyo 2023 Keiji Kikuchi Remote Mobbing
KinectやRealSenseの概要とさまざまな使い方
KinectやRealSenseの概要とさまざまな使い方
いま注目のセンサー&デバイス
いま注目のセンサー&デバイス
Delphi Community Edition Meet up !
Delphi Community Edition Meet up !
大規模SNSにおけるソーシャルアプリの運用とマネタイズ
大規模SNSにおけるソーシャルアプリの運用とマネタイズ
ジェスチャ認識・物体形状取得がもたらす新たな未来
ジェスチャ認識・物体形状取得がもたらす新たな未来
Terraform with Bitbucket pipeline
Terraform with Bitbucket pipeline
UX on HTML5 x Touch UI
UX on HTML5 x Touch UI
少人数でも新規事業を成功させるために意識している3つのこと
少人数でも新規事業を成功させるために意識している3つのこと
What's TMCN?
What's TMCN?
「デモリッションロボッツK.K.」のGenvidインティグレート事例
「デモリッションロボッツK.K.」のGenvidインティグレート事例
UnityとnodeとMMDと
UnityとnodeとMMDと
非ゲーム業界のデザイナーが CEDECに参加してきた
非ゲーム業界のデザイナーが CEDECに参加してきた
【Unite 2018 Tokyo】Windows Mixed Reality 最新アプリ開発情報 ~HoloLens からVRまで~
【Unite 2018 Tokyo】Windows Mixed Reality 最新アプリ開発情報 ~HoloLens からVRまで~
Dev(ice)love デバイス祭り
Dev(ice)love デバイス祭り
20120416 3年後のeラーニング予想大会 中嶋さん
20120416 3年後のeラーニング予想大会 中嶋さん
More from Drecom Co., Ltd.
コンテナで始める柔軟な AWS Lambda 生活
コンテナで始める柔軟な AWS Lambda 生活
Drecom Co., Ltd.
サービスのインシデントを解決するには.pdf
サービスのインシデントを解決するには.pdf
Drecom Co., Ltd.
ドリコムサマージョブ報告 by 佐々木 誠治
ドリコムサマージョブ報告 by 佐々木 誠治
Drecom Co., Ltd.
DRECOM Summer Internship 2019 成果発表 by 鹿内 裕介
DRECOM Summer Internship 2019 成果発表 by 鹿内 裕介
Drecom Co., Ltd.
「AROW」お披露目(導入編)
「AROW」お披露目(導入編)
Drecom Co., Ltd.
「AROW」お披露目(実用編)
「AROW」お披露目(実用編)
Drecom Co., Ltd.
AROW の紹介 〜概要編〜
AROW の紹介 〜概要編〜
Drecom Co., Ltd.
AROW の紹介 〜実践編〜
AROW の紹介 〜実践編〜
Drecom Co., Ltd.
rails-developers-meetup-day4
rails-developers-meetup-day4
Drecom Co., Ltd.
html5conf2018-sponsor-session
html5conf2018-sponsor-session
Drecom Co., Ltd.
DApps のユーザ認証に web3.eth.personal.sign を使おう!
DApps のユーザ認証に web3.eth.personal.sign を使おう!
Drecom Co., Ltd.
3Dリアルマップを用いたモバイルゲーム開発における課題とその解決方法
3Dリアルマップを用いたモバイルゲーム開発における課題とその解決方法
Drecom Co., Ltd.
LoveChainのスマートコントラクトを見てみよう & 非中央集権なトークンのカタチ
LoveChainのスマートコントラクトを見てみよう & 非中央集権なトークンのカタチ
Drecom Co., Ltd.
今月のレッツゴー陰陽師!
今月のレッツゴー陰陽師!
Drecom Co., Ltd.
位置情報を常に取得するのはつらいよ
位置情報を常に取得するのはつらいよ
Drecom Co., Ltd.
カンバンと朝会とわたくし
カンバンと朝会とわたくし
Drecom Co., Ltd.
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
Drecom Co., Ltd.
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
Drecom Co., Ltd.
CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…
CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…
Drecom Co., Ltd.
[CEDEC2014]モバイルゲームにおける社内基盤開発と“実録”
[CEDEC2014]モバイルゲームにおける社内基盤開発と“実録”
Drecom Co., Ltd.
More from Drecom Co., Ltd.
(20)
コンテナで始める柔軟な AWS Lambda 生活
コンテナで始める柔軟な AWS Lambda 生活
サービスのインシデントを解決するには.pdf
サービスのインシデントを解決するには.pdf
ドリコムサマージョブ報告 by 佐々木 誠治
ドリコムサマージョブ報告 by 佐々木 誠治
DRECOM Summer Internship 2019 成果発表 by 鹿内 裕介
DRECOM Summer Internship 2019 成果発表 by 鹿内 裕介
「AROW」お披露目(導入編)
「AROW」お披露目(導入編)
「AROW」お披露目(実用編)
「AROW」お披露目(実用編)
AROW の紹介 〜概要編〜
AROW の紹介 〜概要編〜
AROW の紹介 〜実践編〜
AROW の紹介 〜実践編〜
rails-developers-meetup-day4
rails-developers-meetup-day4
html5conf2018-sponsor-session
html5conf2018-sponsor-session
DApps のユーザ認証に web3.eth.personal.sign を使おう!
DApps のユーザ認証に web3.eth.personal.sign を使おう!
3Dリアルマップを用いたモバイルゲーム開発における課題とその解決方法
3Dリアルマップを用いたモバイルゲーム開発における課題とその解決方法
LoveChainのスマートコントラクトを見てみよう & 非中央集権なトークンのカタチ
LoveChainのスマートコントラクトを見てみよう & 非中央集権なトークンのカタチ
今月のレッツゴー陰陽師!
今月のレッツゴー陰陽師!
位置情報を常に取得するのはつらいよ
位置情報を常に取得するのはつらいよ
カンバンと朝会とわたくし
カンバンと朝会とわたくし
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…
CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…
[CEDEC2014]モバイルゲームにおける社内基盤開発と“実録”
[CEDEC2014]モバイルゲームにおける社内基盤開発と“実録”
HTML5 ゲームフレームワーク開発について
1.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 1 HTML5 ゲームフレームワーク 開発について
2.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 2 自己紹介 山﨑 拓也 @zprodev ドリコム - HTML5 ゲームフレームワーク開発 - HTML5 技術検証 / 課題解決
3.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 3 HTML5ゲームフレームワーク開発の知見から ゲーム開発に必要な要素を知ってもらう HTML5での実現方法を知ってもらう 目的
4.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 4 HTML5ゲームを作れる人が増える 目的
5.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 5 HTML5ゲーム市場が 盛り上がる 目的
6.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 6 アジェンダ ● ゲーム開発に必要な要素とは? ○ ゲームとして成立させるための要素 ○ ゲーム開発でラクするための要素 ● HTML5でどう実現する? ○ スマホとPCの両対応が前提 ○ 約2年前のブラウザでも動作する機能 ■ Chrome50系、Safari10系 ● まとめ
7.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 7 ゲーム開発に必要な要素とは?
8.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 8 グラフィック描画 見た目 大事
9.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 9 サウンド再生 音も無いと盛り上がらない
10.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 10 ムービー再生 演出はド派手にムービーで (演出の実装は辛い)
11.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 11 プレイヤーとの対話 これが出来なきゃゲームじゃ無い
12.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 12 リソース管理 - 画像や音声など大量リソースへのアクセス - キャッシュ化やメモリ解放などの効率化 ライフサイクル管理 - シーン単位で開発できるとラク - デバイスイベントのハンドリング デバッグ機能 - パフォーマンスチューニングに必要
13.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 13 HTML5でどう実現する?
14.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 14 グラフィック描画 ★ 描画にはWebGLを使う GPUを使って高速に描画可能 HTML要素はcanvasだけあればOK
15.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 15 グラフィック描画 ★ 描画にはWebGLを使う WebGLは低レベルなAPIですが、 描画ライブラリを使えばお手軽です 有名どころ - 2DならPixiJS - 3Dならthree.js
16.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 16 ブラウザの描画タイミングを拾えるAPI グラフィック描画 ★ requestAnimationFrameで定期的に更新
17.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 17 最高60FPSで呼ばれる(約16.6ms間隔) 負荷が高いとフレーム間隔が延びる ゲームを完璧に実装したとしても、 外部要因でFPSは変動します。 (バックグラウンドでのアプリ自動更新とか…) グラフィック描画 ★ requestAnimationFrameで定期的に更新
18.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 18 フレーム毎に固定値のアニメーションは❌ グラフィック描画 ★ requestAnimationFrameで定期的に更新 60FPS 30FPS 33.2ms後 66.4ms後
19.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 19 グラフィック描画 ★ performance.now()でフレーム間隔を算出 performance.now() では 起動からの経過時間をマイクロ秒単位で取得できる。 requestAnimationFrameのコールバック毎に経過時間を算 出し、時間ベースでアニメーションさせる。 30FPS 33.2ms後 66.4ms後
20.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 20 ★ Web Audio API を使用する サウンド再生 音声をJavaScriptで制御する多機能API エフェクトかけたり色々出来ます
21.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 21 自動再生ポリシーへの対応 - ユーザー操作を契機に再生開始する必要がある メモリ使用量に注意 - 解放バグや解放のためにテクニックが必要です バックグラウンドでも音が鳴り続ける - ライフサイクル制御(後述)との連携が必要 ★ Web Audio API を使用する サウンド再生
22.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 22 その他の問題や対策などQiitaにまとめてます ★ Web Audio API を使用する サウンド再生
23.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 23 WebGLはHTMLVideoElementを テクスチャとして受け入れます ★ videoをWebGLに食わせる ムービー再生
24.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 24 iOSはplaysinline属性が必要 - iOS10から属性付加でインライン再生が可能になった - 属性を付けないとコントロールUI付きの全画面表示 videoも自動再生ポリシーに抵触する - 無音で良いならmuted属性をつける - 音出したいならユーザー操作を契機に再生 ★ videoをWebGLに食わせる ムービー再生
25.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 25 Chrome73からβのみで発生するバグがある - play直後にWebGLに食わせるとエラーになる - 74以降もβでは発生するがリリース版では再現しない - play後に数ms待ってからWebGLに渡すと大丈夫 ★ videoをWebGLに食わせる ムービー再生
26.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 26 MouseEvents - PCのマウス操作を拾えるAPI TouchEvents - スマホなどタッチデバイスの操作を拾えるAPI ★ MouseEvnetsとTouchEventsを併用 プレイヤーとの対話
27.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 27 TouchEvents - touchstart - touchend - touchcancel - touchmove MouseEvents - mousedown - mouseup - mousemove - mouseenter - mouseleave - mouseover - mouseout ★ MouseEvnetsとTouchEventsを併用 プレイヤーとの対話 イベントリスナーでキャッチ
28.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 28 TouchEvents - touchstart - touchend - touchcancel - touchmove MouseEvents - mousedown - mouseup - mousemove - mouseenter - mouseleave - mouseover - mouseout ★ MouseEvnetsとTouchEventsを併用 プレイヤーとの対話 押す 離す 移動
29.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 29 MouseEvents - mousedown - mouseup - mousemove - mouseenter - mouseleave - mouseover - mouseout TouchEvents - touchstart - touchend - touchcancel - touchmove 着信など ★ MouseEvnetsとTouchEventsを併用 プレイヤーとの対話 マウスカーソルが対象から外れた時 “離す”が発火しないパターンに注意
30.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 30 Touchではマルチタッチ考慮も必要 座標はコールバック引数から取得する ★ MouseEvnetsとTouchEventsを統合 プレイヤーとの対話
31.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 31 MouseとTouchの統合イベント ★ PointerEvnetsがやってくる プレイヤーとの対話 Safari対応待ってました
32.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 32 Gamepad APIも結構前から使えます ★ 実はゲームパッドも使える プレイヤーとの対話 Chromeのジョイコン対応が少し前にバズってました
33.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 33 ★ ブラウザキャッシュで通信量節約 HTML5ゲームでは全てのリソース取得にWeb通 信を伴います。 HTTPレスポンスヘッダーにリソース寿命を設定 することで、ブラウザにリソースがキャッシュされ 再通信時の通信量を節約できます。 リソース管理
34.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 34 ★ ブラウザキャッシュで通信量節約 リソース寿命系レスポンスヘッダー - Expires : 日時指定の強いキャッシュ - Cache-Control : 秒数指定の強いキャッシュ - Last-Modified : 更新日時で管理する弱いキャッシュ - ETag : 更新日時やファイルサイズから生成したユニーク なIDで管理する弱いキャッシュ サーバー側で適切な設定を リソース管理
35.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 35 ブラウザで動作するDBシステム バイナリデータも保存可能なため、 大容量ファイルストレージとして使える ★ IndexedDBでJS主導の通信量節約 リソース管理
36.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 36 iOSは12.2までblob非対応 - blob → ArrayBufferに変換すれば保存可能 容量上限にも注意 - Web上には実際の挙動と異なる情報が散見されます - 現状実機で見る限り、Android Chromeで数GB、iOS Safariはストレージを食い潰すまでは保存可能 - Safari13で上限が実装されます - Exceptionが発生しても死なない実装を! ★ IndexedDBでJS主導の通信量節約 リソース管理
37.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 37 リソースキャッシュに特化したライブラリをOSSと して公開してます。 ★ IndexedDBでJS主導の通信量節約 リソース管理 https://github.com/drecom/idb-cache
38.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 38 @drecom/idb-cache の特徴 - データ容量 or ファイル数で保存上限を設定可能 - ファイル毎にキャッシュ期間を設定可能 - 上限を超える場合は期限の近いファイルから削除 - 期限などのmetaデータとファイルの実データを分割保存 し検索を効率化 - String、Blob、ArrayBufferの保存に対応 ★ IndexedDBでJS主導の通信量節約 リソース管理
39.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 39 ★ Page Visibility API でポーズ・レジューム Page Visibility API でブラウザ表示状況を監視できます。 ライフサイクル管理 これを利用し、サウンドがバックグラウンドで鳴り続ける問題 への対処や、performance.now()で計測しているゲーム内時 間の一時停止を行います。
40.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 40 スマホ回転やソフトウェアキーボード出現などでの描画領域 が変わる場合がある。 ゲーム体験を損ねないよう、resizeイベントを検知して canvasをリサイズする。 ★ resizeイベントを検知してcanvasリサイズ ライフサイクル管理
41.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 41 リサイズは少し待ってから - resizeイベント発生直後は正しいwindowサイズが取れな い場合がある - resizeイベントが短時間で多重発生する場合がある ★ resizeイベントを検知してcanvasリサイズ ライフサイクル管理
42.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 42 ログ、通信量、メモリ使用、ストレージ内容などは ブラウザ備え付けの開発者ツールで確認できま す。 Android Chrome や iOS SafariもPCと接続して 確認する方法があります。 ★ ブラウザ備え付けの開発者ツールを活用 デバッグ機能
43.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 43 three.js開発者、Mr.doob氏のstats.jsカスタマイ ズ版を公開してます。 ★ @drecom/stats.js デバッグ機能 https://github.com/drecom/stats.js
44.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 44 ★ @drecom/stats.jsの特徴 デバッグ機能
45.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 45 まとめ
46.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 46 まとめ ● グラフィック周りはWebGL ● 描画更新はrequestAnimationFrame ● 時間計算はperformance.now() ● サウンドはWebAudioAPI ● プレイヤーとの対話はMouseやTouchイベント ● ブラウザキャッシュやIndexedDBで通信量節約 ● PageVisibilityAPIやresizeイベントでブラウザの表示状況をハ ンドリング ● パフォーマンスチューニングは開発者ツールを活用
47.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 47 これでHTML5ゲーム作れますね!
48.
Copyright Drecom Co.,
Ltd. All Rights Reserved. 48 ご静聴ありがとうございました
Download now