Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JSでギャルゲーをつくろう!(第2版)
Search
Endo_Hizumi
September 25, 2024
0
55
JSでギャルゲーをつくろう!(第2版)
Endo_Hizumi
September 25, 2024
Tweet
Share
More Decks by Endo_Hizumi
See All by Endo_Hizumi
JSでギャルゲーをつくろう!(第3版)
endohizumi
0
39
JSでギャルゲーをつくろう!
endohizumi
0
300
テレビを飲み込め! Webの嵐!! / Swallow the TV! Web storm! !!
endohizumi
1
89
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
300
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
210
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
170
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
910
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
140
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
83
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Code Reviewing Like a Champion
maltzj
524
40k
Side Projects
sachag
455
42k
The Language of Interfaces
destraynor
158
25k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Invisible Side of Design
smashingmag
301
51k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Rails Girls Zürich Keynote
gr2m
95
14k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Transcript
JSでギャルゲーを作ろう! JS製ビジュアルノベルエンジン WebTaleKitのご紹介
自己紹介 名前:遠藤ヒズミ 生息地:千葉県 分類:Webフロントエンジニア(サーバーサイドもいけるよ) 好きなもの:太めのロボットとニチアサとPSO2の自キャラ 今期のアニメ:負けヒロインが多すぎる! 恋は双子で割り切れない 2.5次元の誘惑
導入 JavaScriptで ビジュアルノベルゲームエンジン 作ったった
開発経緯 • 友達からヒズミさんの書いた小説はゲームでもありだねと言われる • エンジンは、なにを使おう?? ◦ いや、HTML5(死語)を駆使すれば、ワンチャン自作できるのでは? ▪ canvasとWebAudioを使えば、作れるはずだから、試してみよう! ◦
おまえは誰だ? 俺は、 JavaScript(TypeScript)技術者だ →よし、作ろう!(2023年8月)
アルファ版リリース! 出来た!(2024年7月)
アルファ版リリース! 鋭意開発中!
WebTaleKit とは ビジュアルノベルゲーム(以下: VN)をWeb アプリケーションとして作るためのゲームエ ンジン VNに必要な基本機能を、HTMLベースの 独自言語で記述し、ゲームロジックを JavaScriptで作る事が出来る
WebTaleKit の特徴 画面構成 • HTMLとcanvasの2段構成 ◦ 背景とキャラの canvas ◦ UI部分のHTML
Canvas HTML
WebTaleKit の特徴 画面構成 • HTMLとcanvasの2段構成 ◦ 背景とキャラの canvas ◦ UI部分のHTML
→HTML+CSS+JSで好きにUI を組める! Canvas HTML
WebTaleKit の特徴 画面構成 • HTMLとcanvasの2段構成 ◦ 背景とキャラの canvas ◦ UI部分のHTML
→HTML+CSS+JSで好きにUI を組める! →Vue.jsやReact使える! Canvas HTML
WebTaleKit の特徴 画面構成 • HTMLとcanvasの2段構成 ◦ 背景とキャラの canvas ◦ UI部分のHTML
→HTML+CSS+JSで好きにUI を組める! →Vue.jsやReact使える! →解像度に非依存で表 示!
WebTaleKit の特徴 ゲーム進行制御 • 独自言語とJavaScript • 独自言語はビルドすると JavaScriptとして、生成さ れる •
WebTaleKitエンジンは生 成されたJSを実行する →画面とシナリオを分離して、作 業を進めることができる ビルド ブラウザーで実行
WebTaleKit の特徴 WebTaleScript(略:WTS) • HTMLベースの独自言語 • 地の文やセリフの表示な ど機能をセマンティックに 表現 •
JavaScriptと相互に連携 が出来る • HTTPメソッド属性を使っ てREST API呼び出しが出 来る 例: 地の文の表示: <text speed='50'>これは地の文</text> セリフの表示: <say name='' voice=''>これはセリフ</say> 画像の表示: <show path="" name="" pos="center:top"> 選択肢の表示: REST API:
WebTaleKit の特徴 導入が楽 • npm create tale-game • コマンド一発ッ!!
デモンストレーション https://test-game-chi.vercel.app/
今後の展開 - アニメーション・トランジションの拡充 - セーブ&ロード機能の追加 - フラグ管理機能の追加 - プラグイン機能の追加 -
vercel/netlifyへのデプロイ機能の追加 - Electronなどを用いたクロスプラットフォーム展開の対応 - GUIエディタの提供 - TypeScriptへの対応(移行中) etc…
最後に 使ってみた感想・意見お待ちしております! - アイデア・今後の実装内容:https://trello.com/b/qYNGh7MY - GitHubレポジトリ:https://github.com/EndoHizumi/webTaleKit - フィードバックフォーム:https://forms.gle/KMRWLinYNAfqt8PfA