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でギャルゲーをつくろう!(第3版)
Search
Endo_Hizumi
April 04, 2025
Technology
0
53
JSでギャルゲーをつくろう!(第3版)
HTMLとJavaScriptで簡単にブラウザノベルゲーが作れるWebTailKitのご紹介です!
Endo_Hizumi
April 04, 2025
Tweet
Share
More Decks by Endo_Hizumi
See All by Endo_Hizumi
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
120
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
68
JSでギャルゲーをつくろう!
endohizumi
0
340
テレビを飲み込め! Webの嵐!! / Swallow the TV! Web storm! !!
endohizumi
1
95
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
310
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
210
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
180
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
920
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
140
Other Decks in Technology
See All in Technology
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
190
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
430
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
500
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
880
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
230
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1.1k
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
310
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
890
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
How STYLIGHT went responsive
nonsquared
100
5.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building an army of robots
kneath
306
46k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Making Projects Easy
brettharned
117
6.4k
Fireside Chat
paigeccino
39
3.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
A better future with KSS
kneath
239
17k
Transcript
JSで ビジュアルノベルエンジン 作った
自己紹介 名前:遠藤ヒズミ 生息地:千葉県 分類:Webフロントエンジニア(サーバーサイドもいけるよ) 好きなもの:太めのロボットとニチアサとPSO2の自キャラ
導入 JavaScriptで ビジュアルノベルゲームエンジン 作ったった
開発経緯 • ノベルゲー作りたいンゴ...でも、既存のスクリプト覚えるのめんどいンゴww ◦ いや、HTML5(死語)を駆使すれば、ワンチャン自作できるのでは? ▪ CanvasとWebAudioを使えば、作れるはずだから、試してみよう! ◦ おまえは誰だ? 俺は、 JavaScript(TypeScript)技術者だ
→ よし、作ろう!(2023年8月) → て”き”た”ぁ”!ver.0.1リリース!(2024年1月) → 現在、ver.0.2.11
WebTaleKit とは ブラウザで動くノベルゲームを作るための ゲームエンジン UIを、HTMLで好きに作れる。 進行制御をとっつきやすいHTMLベースの 言語で記述し、エンジンを JavaScript(TypeScript)で拡張できる
4つの特徴 - HTMLで好きなUIが作れる - オートスケールでどの画面でも - 環境構築がコマンド一発でらっくらく - とっつきやすい独自言語
WebTaleKit の特徴 HTMLで好きなUIを作れる • 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 の特徴 オートスケールでどの画面でも 画面に合わせて、自動で拡 大縮小 →どんな画面で同じ表示!
WebTaleKit の特徴 環境構築がコマンド一発 • npm create tale-game → 楽ッ!!
WebTaleKit の特徴 とっつきやすい独自言語 • HTMLベースで見やすい • 直感的な英単語で理解し やすい • JavaScriptのメソッド呼び
出しができる。 • 属性を使ってREST API呼 び出しが出来る → デザイナーでも作れる? WebTaleScriptの記述例: 地の文の表示: <text speed='50'>これは地の文</text> セリフの表示: <say name='' voice=''>これはセリフ</say> 画像の表示: <show path="" name="" pos="center:top"> 選択肢の表示: REST API:
今後の展開 - アニメーション・トランジションの拡充 - セーブ&ロード機能の追加 - フラグ管理機能の追加 - プラグイン機能の追加 -
Electronなどを用いたクロスプラットフォーム展開の対応 - GUIエディタの提供 - TypeScriptへの対応(移行中)←9割方できた etc…
最後に 使ってみた感想・意見お待ちしております! - アイデア・今後の実装内容:https://trello.com/b/qYNGh7MY - GitHubレポジトリ:https://github.com/EndoHizumi/webTaleKit - フィードバックフォーム:https://forms.gle/KMRWLinYNAfqt8PfA - デモンストレーション:
https://test-game-chi.vercel.app/