テキストだけのエロゲーを作る vol.1
次回:
●[テキストだけのエロゲーを作るvol.2 – 111のデジ同人感想]
以前、東方鉄鎖録Vol.7の感想を書いたところ、
「今の時代でも、テキストオンリーのゲームでこれだけ売れるとは」
「しかも割と価格も高い」
という反応が、主に制作関係の知り合いから窺えました。
(個人的には、鉄鎖録がプロダクトとして優れてるのは、毎作少しずつ足すことで性奴隷の反応が超ボリューム、しかも毎回新作扱いで登録してるので、利益も取れる…という所だとも思いますが。
ちなみにDLsiteはこの方式を嫌ったのか、3作めのVol.8は今のところDMMのみの発売。
あとはやはりera系という、長い間残ってる調教メソッドの強さ、という事でしょうか…)
ところで「でもUIがちょっとなー、Electronとかでやればもっと簡単に、良い物ができるのになー」と書いてしまったのも自分。
「ほほお これは面白いガキだぜ これはなんとしても同じ値段で、やってもらわなきゃな」
「えっ 同じ値段でeraゲーを!?」
と、こんな感じで111のゲーム制作コラムはスタートです。
今回のお題は”htmlでもゲームは作れる”。
これを見て自分で作ってみるも良し、少なくとも作ろうとして同人制作のスタートラインに立つのが大事、大事なんだ、今の時代はね。
まあ最悪手を動かさなくてもいいよ、でもこれを読んで製作のダイナミズムを感じよう。
まだ知らない自分に震えろ。
こんなの見なくてもゲーム制作余裕な人は…、これからもバリバリ頑張ってください。
最低限のCSSとかJavaScript講義
そう、近年の同人エロゲはUnityにRPGツクールでさえスクリプト、アニメならAffterEffectとかなんとか…なにやら難しさが加速しておりますが、臆することはない。
ゲームの本質とは、そしてエロの本質とは、また別だからだ。
難しく考える必要はない。
.htmlでもエロゲは作れるし、そして売れる。
おかねがもうかります。
という訳でやってみましょう。
今回、必要な知識は
- HTML構成(idなど)
- CSS
- JavaScript(JQueryで操作)
である。
最後の2つはまあ無くてもギリギリ何とかなるが、まぁあった方が便利。
冒頭でちょっと触れたElectronは…まぁ、まだ3回は先の話になりそうだから忘れてくれていい…。
このブログを見てるのはきっと30代以上、自分でホムペ作って無闇にカーソルを蝶が追いかけたり、frameで画面横にメニューを作ったりした世代だからJavaScriptやCSSを触った事があるよね、きっと。
一応、説明しておく。
本当にHTMLだけでやるなら、文字色を変えたい場合には
<span style="color:#F00;">ネコバ</span>
と書くことになる。
更にクリックして何かを起こしたい場合は、
<span onclick="alert('クリックした');">ネコバ</span>
とかね。
さすがにこれで全てやるのはしんどいので、
<span id="XXX">ネコバ</span>
とidを紐付けて、
CSSファイルに
#XXX{color : #F00}
と書いたり、
同じ様にJavascriptなら
a = document.querySelector("#XXX");
a.onclick = function(){alert("クリックした")};
JQueryを使うならもうちょい簡単になって
$("#XXX").click(function(){alert("クリックした")});
とかを書いてやると。
基本形はHTMLに埋め込みだが、それを別ファイルでアレコレしたい時に使うのがCSS、そしてJavaScript。
そして見た目に関することはCSS、
ものを動かしたり、クリックした時になんか起こしたり、とかはJavaScriptである
作ってみよう
んで今回やりたい事はなにか、それは「選択肢をクリックすると本文になんらかのメッセージを表示」「あとHPとかのパラメーターも変わる」
という事である。
A B
C
という画面構成になってる今、Bを”クリックすると”、Aに文字を表示し、Cの数値を減らしたりすると。
そのままidが振られてるとすれば、JavaScript(JQuery)で
$("#B").click(function(){
$("#A").text("あはーんうふーん");
$("#C").text("HP残量");
});
とやるだけで、まさにクリック→文章書き換えできるし、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
111先生のお手本
とりあえずこんな形になった。
選択肢クリックで色々でます
という訳で、111先生頑張って、現時点でここまで作りましたよ。
実は色々効率的な形にこだわって、一週間とか掛かったんですが…。
調教ゲーじゃないじゃん、なんだよネコバって思うかもですが、
なんか調教テキスト書こうと思ったら恥ずかしくて出来なくてね…。(基本的にエロゲ向いてねえ)
ちなみにhtmlはPCでもスマホでも、webでもデスクトップに置いた状態でも、ブラウザがある環境ならプレイできる。
まあwebとデスクトップ(ローカルと言う)ではちょっと注意点、違いがあるんですけど…
今回はDLsiteに配布する形式を想定して、ローカルで動くよう頑張っていきます。
zipはここ。
http://kirara111.sakura.ne.jp/js_test/simple_text_2016_2_19.zip
落として中を覗いて改造するも良し、111の実力に薄ら笑いするも良しなのだ。
実はHTMLのゲームは他にもあって、
[javascript脱衣クイズゲーム 孤高の女騎士VS熟れた義母]
とか、割と味がありましたね…。
広義な意味ではFLASHのお触りとかもそうですし。
今回、このコラムが終わる頃には111はhtmlエロゲを、DLsiteに登録できるのであろうかっ!(え、マジで?)
”こんな事で”お金になるしエロいんだ、始められるんだぞ、っていう同人ハスリングを失うべきではないし、その爪を一般ユーザーが持っていて欲しい。
同人はいつでも、どこからでも始められる。そこに救われる人もいる。
最近の同人エロゲは専門化が進みすぎ、またユーザーも熱い物を失いがちではないのか。知らんけど。
ディスカッション
コメント一覧
鉄鎖録は以前盗用で騒がれていたことがありましたね。
対応は早かったようですが、基本的に有志が作っていた界隈のものを商用に使うのは問題もあるかもしれませんね…
おおそうなんですか…、その経緯を知らないので何とも言えないですが、少なくとも「有志が作った界隈のものを商用に使うのは問題」を全てに当て嵌めるのは違うかな。
今のインターネットは大部分、オープンソースのプロジェクトが元になっておりますので…
きちんとコンセンサス取れてるかこそが争点でしょう。
ただMMDとかもそうですが、日本だと特にそういう力は多いように思えますね。
個人的には、商用で出したいと思った時に、それも出来る自由が用意されてた方が楽しいと思うのですが。