hokug? #

タイッツー開発でお馴染み「ほく」さんが開発したゲームエンジンです。
クソゲーが簡単に作れるらしいです。JavaScript使用。
公式ドキュメント(https://github.com/hoku/hokug)

この記事について #

MorningScript(モニスクhttps://morningscript.buta3.net/）でプログラムの超基本に触れた、かつhokugをとりあえず簡単にさわってみたい人向け。

詳しい説明はすっとばしてとにかく動かしてみるのが目的です。

今回はモニスクでいうと変数〜四則演算くらいの内容をざっくりと

※僕自身がJavaScript独学で説明やコードが間違っていることがあると思います、何か気がついたら教えてください。

導入してみる #

必要なファイルをまとめました
↓からダウンロードして使ってください
https://sdkaeru.com/hokug/dl.html
zipファイルを解凍すると中身が下のような構成になっていると思います


あとブラウザとテキストエディタ（コードエディタ）があれば開発できます。
ブラウザは開発者ツールが使えるやつを（chrome,safariとか）。
開発者ツールについては検索してみてください。consoleという機能が必要になります。（エラーメッセージとかを表示するやつ）

コードエディタがあれば入力したコマンドに色が付いたり入力補完してくれたり便利機能を利用できます。
ちょっと不便ですが普通のテキストエディタ（winだとメモ帳？）でもいいです。
（昔はテキストエディタでhtml打ったりしてたよね…？）

index.htmlをブラウザで開くとゲーム画面が表示されます。
まだ何も作っていないので黒い四角です

文字を表示してみる #

まず文字を表示してみましょう、hallo,worldです、基本です。

jsフォルダの中のgame.jsをいじっていきます。

テキストエディタで開いてファイルの1番下までスクロールしてください
下のようになってると思います
（すぐ使いやすいように僕が追加したものです、公式のをコピーした場合は無いので注意）

/**
 * 初期化処理
 * hokug.state.phase が　UNSTART 状態のときに1度実行
 */
function init() {
	hokug.drawFillRGBA(0,0,0,1);
}

ゲームが読み込まれた時に1度だけ実行される処理です。

今回はとりあえず文字を表示するだけなのでここに書いていきます。

hokug.drawFill〜の下に次の2行を追加します。

let textColor = new hokug.Class.Color(100, 255,100, 1);
hokug.drawText(50, 50, "おはタイツ", textColor, 20);

ブロック全体では次のようになります

function init() {
	hokug.drawFillRGBA(0,0,0,1);
	//↓追加した部分
	let textColor = new hokug.Class.Color(100, 255,100, 1);
	hokug.drawText(50, 50, "おはタイツ", textColor, 20);
	// ↑追加した部分
}

保存後にindex.htmlをブラウザで開いて（開きっぱなしだったらリロードで）

こんな感じになっていたら成功です。

少し詳しく #

追加した部分を少し詳しくみていきます

let textColor = new hokug.Class.Color(〜
色の情報を設定しておくやーつです

hokug.Class.Color(r,g,b,a);
()内に設定に必要なデータを入力します。
r,g,b,a：それぞれ赤、緑、青の色味を0〜255で入力します。
a：不透明度を0〜1の範囲で入力します。（0.5で50％の不透明度、0で完全に透明になります）。
cssと同じ感じです。
例）
hokug.Class.Color(0,0,160,1);//暗めの青
hokug.Class.Color(255,255,0,0.7);//ちょっと透けてる黄色

hokug.drawText(〜
文字を描画するやーつです

hokug.drawText(x,y,t,c,s);
x：描画開始地点のx座標です、0が左端。
y：描画開始地点のy座標です、0が上端。フォントサイズ以下の数字だと画面外にはみ出します。
t：表示したい文字列です。数値でも可。
c：文字列の色です。
s：フォントサイズです。

色を変えたり表示内容や位置を変えたりしてみてください
hokug.drawText()の行を増やせば表示する行数も増やせます。

例）

hokug.drawText(50, 50, "おはタイツ", textColor, 20);
hokug.drawText(50, 80, "今日は晴れてるね", textColor, 20);//追加した行

色の設定も増やせば1行目と2行目で色を変えたりもできます
例）

let textColor = new hokug.Class.Color(100, 255,100, 1);
let textColor2 = new hokug.Class.Color(255, 155,140, 1);//追加した行

hokug.drawText(50, 50, "おはタイツ", textColor, 20);
hokug.drawText(50, 80, "今日は晴れてるね", textColor2, 20);//色指定のところをtextColor2に

もう少し詳しく #

先頭のletは変数宣言です。textColorという名前の変数を作って色の情報を保存しています。
モニスク風に書くと[var:textColor (色の設定)]です。
モニスクと同じようにvarという変数宣言も使えますが、javascriptでは古い書き方なのでletで覚えたほうが良いと思います。（挙動もすこし変わります）

変数を後から呼び出す時はletは要りません。textColorだけで呼び出せます。

変数にはモニスクと同じように文字列や数字を入れたり、今回のように色の設定などのオブジェクトを入れることができます。大抵なんでも入ります。

=は"等価"ではなく代入を表します。
左の変数に右の値や計算結果などを格納する式になります。
代入なので下のような式も成り立ちます

let n = 1;
n = n + 1;// nは2になる

元の数に1を足して上書きされます。
書き忘れてましたが行末には;（セミコロン）を入れます。

//はコメント行です。モニスクと違って行の途中からでも使えます。
また/*〜*/で囲まれた範囲もコメントになります。

変数に文字列を入れて使ってみる #

変数を使って文字を表示してみましょう。
文字列は"（ダブルクォーテーション)か'（シングルクォーテーション）で囲います。入力しやすいほうでいいと思います。

できそうだったらサンプルをみる前に試してみてください。

//〜
let moji = "これは文字列ですよ";
//〜
hokug.drawText(50, 50, moji, textColor, 20);

変数名はモニスクと同じ感じでつければ大体問題ないです。
ただし先頭に数字は使えません（モニスクは使える）。

文字列の連結は+でできます。

let moji1 = "おは";
let moji2 = "タイツ";
let mojimoji = moji1 + moji2;//→"おはタイツ"
//直接文字列を入力してもいい
let mojimoji2 = "おつ" + moji2://→"おつタイツ"

+の前後に文字列が含まれていると連結に、数字同士だと普通に足し算になります。

四則演算 #

四則演算は+,-,*,/を使います。普通です。
+以外は文字列が入っていると上手くいきません。普通ですね。
"おはタイツ" - "タイツ"で"おは"になったりもしません。ちょっと残念

終わり #

最後投げやりな感じですが今回はここまでです。

練習で文字列を表示するx,y座標や色指定の数字を変数にしてみたり、計算して出してみたりするのもいいかもしれません。

2行目以降のy座標は1行目のy座標に（フォントサイズ×行数）を足した数字、みたいにできれば位置の指定を自動化できます。

次回で条件分岐とループを使った処理をいじります。

モニスクをある程度使える人なら「javascript 条件分岐」とか「ループ」とかで検索すれば次回を読むまでもなく応用でいけるんじゃないかと思います。

最終的に文字を動かしてみたり、画像を扱ったりして簡単なゲームができればいいなと思います。