テキストだけのエロゲーを作る vol.1

ゲーム制作コラム

　
次回：
●[テキストだけのエロゲーを作るvol.2 – １１１のデジ同人感想]

東方鉄鎖録スクショ

以前、東方鉄鎖録Vol.7の感想を書いたところ、
「今の時代でも、テキストオンリーのゲームでこれだけ売れるとは」
「しかも割と価格も高い」
という反応が、主に制作関係の知り合いから窺えました。
（個人的には、鉄鎖録がプロダクトとして優れてるのは、毎作少しずつ足すことで性奴隷の反応が超ボリューム、しかも毎回新作扱いで登録してるので、利益も取れる…という所だとも思いますが。
ちなみにDLsiteはこの方式を嫌ったのか、３作めのVol.8は今のところDMMのみの発売。
あとはやはりera系という、長い間残ってる調教メソッドの強さ、という事でしょうか…）
ところで「でもUIがちょっとなー、Electronとかでやればもっと簡単に、良い物ができるのになー」と書いてしまったのも自分。
「ほほお　これは面白いガキだぜ　これはなんとしても同じ値段で、やってもらわなきゃな」
「えっ　同じ値段でeraゲーを！？」
と、こんな感じで１１１のゲーム制作コラムはスタートです。
今回のお題は”htmlでもゲームは作れる”。
これを見て自分で作ってみるも良し、少なくとも作ろうとして同人制作のスタートラインに立つのが大事、大事なんだ、今の時代はね。
まあ最悪手を動かさなくてもいいよ、でもこれを読んで製作のダイナミズムを感じよう。
まだ知らない自分に震えろ。
こんなの見なくてもゲーム制作余裕な人は…、これからもバリバリ頑張ってください。

最低限のCSSとかJavaScript講義

そう、近年の同人エロゲはUnityにRPGツクールでさえスクリプト、アニメならAffterEffectとかなんとか…なにやら難しさが加速しておりますが、臆することはない。
ゲームの本質とは、そしてエロの本質とは、また別だからだ。
難しく考える必要はない。
.htmlでもエロゲは作れるし、そして売れる。
おかねがもうかります。
という訳でやってみましょう。
今回、必要な知識は

  • HTML構成（idなど）
  • CSS
  • JavaScript（JQueryで操作）

である。
最後の２つはまあ無くてもギリギリ何とかなるが、まぁあった方が便利。
冒頭でちょっと触れたElectronは…まぁ、まだ３回は先の話になりそうだから忘れてくれていい…。
このブログを見てるのはきっと３０代以上、自分でホムペ作って無闇にカーソルを蝶が追いかけたり、frameで画面横にメニューを作ったりした世代だからJavaScriptやCSSを触った事があるよね、きっと。
一応、説明しておく。

　　
デスクトップに作る→HTML書く→ブラウザで開く

本当にHTMLだけでやるなら、文字色を変えたい場合には

<span style="color:#F00;">ネコバ</span>

と書くことになる。

　javascript書く→ブラウザで開いてクリック

更にクリックして何かを起こしたい場合は、

<span onclick="alert('クリックした');">ネコバ</span>

とかね。
さすがにこれで全てやるのはしんどいので、

<span id="XXX">ネコバ</span>

とidを紐付けて、

　こんな風にしてHTMLで読み込み、外部で書きます

CSSファイルに

#XXX{color : #F00}

と書いたり、
同じ様にJavascriptなら

a = document.querySelector("#XXX");
a.onclick = function(){alert("クリックした")};

JQueryを使うならもうちょい簡単になって

$("#XXX").click(function(){alert("クリックした")});

とかを書いてやると。
基本形はHTMLに埋め込みだが、それを別ファイルでアレコレしたい時に使うのがCSS、そしてJavaScript。
そして見た目に関することはCSS、
ものを動かしたり、クリックした時になんか起こしたり、とかはJavaScriptである

作ってみよう

枠組みを作るときはtableが便利だ

んで今回やりたい事はなにか、それは「選択肢をクリックすると本文になんらかのメッセージを表示」「あとＨＰとかのパラメーターも変わる」
という事である。
A　B
　　C
という画面構成になってる今、Ｂを”クリックすると”、Ａに文字を表示し、Ｃの数値を減らしたりすると。
そのままidが振られてるとすれば、JavaScript(JQuery)で

$("#B").click(function(){
$("#A").text("あはーんうふーん");
$("#C").text("HP残量");
});

とやるだけで、まさにクリック→文章書き換えできるし、HPの表記も変わる、という基本の流れはできる。
基本はそれ。
ただ世の中の人はもっともっと効率的に・キレイに作りたくて、色々と知識を蓄えていくのである。
ちなみにＨＰ変化を反映するならこんな所か。（JavaScript）

var hp = 100; // 変数宣言
$("#B").click(function(){
hp -= 10;
$("#C").text("HP" + hp);
if(hp >= 50){
$("#A").text("まだまだ平気よ");
}else{
$("#A").text("いくいくー");
}
});

CSSも分かりやすいようにするなら、こんな感じ。
（枠の大きさを指定、マウスを重ねた時にクリックできる場所だと分かるようポインタを変化）

table td{
width : 200px;
height : 200px;
}
#B{
cursor : pointer;
background-color : #FF0;
}

サンプル：（触ると反応します）

zipはここ。
http://kirara111.sakura.ne.jp/js_test/text-test1.zip

１１１先生のお手本

とりあえずこんな形になった。
選択肢クリックで色々でます
WM2233806

という訳で、１１１先生頑張って、現時点でここまで作りましたよ。
実は色々効率的な形にこだわって、一週間とか掛かったんですが…。
調教ゲーじゃないじゃん、なんだよネコバって思うかもですが、
なんか調教テキスト書こうと思ったら恥ずかしくて出来なくてね…。（基本的にエロゲ向いてねえ）
ちなみにhtmlはＰＣでもスマホでも、webでもデスクトップに置いた状態でも、ブラウザがある環境ならプレイできる。
まあwebとデスクトップ（ローカルと言う）ではちょっと注意点、違いがあるんですけど…
今回はDLsiteに配布する形式を想定して、ローカルで動くよう頑張っていきます。
zipはここ。
http://kirara111.sakura.ne.jp/js_test/simple_text_2016_2_19.zip
落として中を覗いて改造するも良し、１１１の実力に薄ら笑いするも良しなのだ。
実はHTMLのゲームは他にもあって、
[javascript脱衣クイズゲーム 孤高の女騎士VS熟れた義母]
とか、割と味がありましたね…。
広義な意味ではFLASHのお触りとかもそうですし。
今回、このコラムが終わる頃には１１１はhtmlエロゲを、DLsiteに登録できるのであろうかっ！（え、マジで？）
”こんな事で”お金になるしエロいんだ、始められるんだぞ、っていう同人ハスリングを失うべきではないし、その爪を一般ユーザーが持っていて欲しい。
同人はいつでも、どこからでも始められる。そこに救われる人もいる。
最近の同人エロゲは専門化が進みすぎ、またユーザーも熱い物を失いがちではないのか。知らんけど。

ゲーム制作コラム

Posted by １１１