100日後に完成するゲームシステム 3日目「木や岩の配置」

日々精進でルーティーンを欠かせない、弓削田です。 フィールドマップが完成したら、そこに配置するオブジェクトが必要です。 種類は今後たくさんつくっていかないといけないので、 とりあえず、今回は、木と岩を簡単に設置してみたいと思います。

素材の用意

木素材 wood.png

岩素材 rock.png

前回のフィールド・マスにちょこんと乗せた木と岩の画像を作ってみました。 マスのサイズが32*64でしたが、今回のオブジェクト画像のサイズは64x64で作っています。 キリのいい数字ですね。

配置

用意した素材を適当な位置においてみると次のような感じになります。 なかなかいい感じですね。

構築ポイント

今回追加した、javascriptプログラムは、以下の通りです。 MAIN.prototype.put_object = function(map){ let img; img = this.put_object_image("wood.png" , 64 , 16); map.appendChild(img); img = this.put_object_image("rock.png" , 96 , 32); map.appendChild(img); }; MAIN.prototype.put_object_image = function(path , x , y){ let img = new Image(); img.src = path; img.className = "obj"; img.style.setProperty("left",x + "px",""); img.style.setProperty("top" ,y + "px",""); return img; }; 前回プログラムに加えると画面に配置されるようになるのですが、 今回は座標をそのまま手打ちしてます。 フィールドマップをベタに数値入力していくのではなく、マップデータというのを作って、それに該当する表示をするといった 修正なども含めた効率のいい構成にしなければいけないので、 次回は、そうした構成について考えてみたいと思います。