100日後に完成するゲームシステム 2日目「基本フィールドの構築」

2021年1月13日

テクノロジー 特集

eyecatch ゲームは好きだけど、最近はあまりできていない、弓削田です。 RPGゲームシステムを作る時に、とりあえず、土台となるフィールドをjavascriptを使って作ってみたいと思います。

仕様

クォータービューの基礎となる、四角形をタイル状に並べるだけの処理をい実装します。 まずは、タイル部分のテクスチャを用意。 これを何個も並べるだけ。

フィールド表示

基本となるhtmlを用意しました。 <!DOCTYPE html> <html> <head> <meta charset="urf-8"> <title>100日で作るゲームシステム</title> <link rel="stylesheet" href="game.css"> <script src="game.js"></script> </head> <body> <div class="game"></div> </body> </html> これにcssを当てて、先程のチップ画像をbackgroundに普通に貼り付けてみると、 この時のcssは、 html,body{ height:100%; } *, *:before, *:after{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .game{ position:relative; display:block; width:300px; max-width:100%; height:300px; max-height:100%; overflow:hidden; background-color:#ddd; margin:30px auto; padding:0; transform-origin:top left; transform:scale(1.0); cursor:none; background-image: url("1.png"); background-size: 64px 32px; background-position-x:0; } ・・・こんな感じです。 平面の感じは出ていますね。 でも、フィールド感がないので、このままではゲームフィールドとしては使えません。 ちゃんとクォータービューとして並べて表示してあげる必要があります。

プログラミング

javascriptを使って、チップを並べた表示をしてみます。 html,body{ height:100%; } *, *:before, *:after{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .game{ position:relative; display:block; width:300px; max-width:100%; height:300px; max-height:100%; overflow:hidden; background-color:#ddd; margin:30px auto; padding:0; transform-origin:top left; transform:scale(1.0); cursor:none; background-size: 64px 32px; background-position-x:0; } .game img{ position:absolute; display:block; min-width:64px; min-height:32px; border:0; padding:0; margin:0; line-height:32px; text-align:center; background-position : left bottom; } (function(){ let MAIN = function(){ this.game = document.querySelector(".game"); this.view_field(this.game); }; MAIN.prototype.view_field = function(map){ let max_width = 4; let max_height = 4; let map_w = ((max_width + max_height) * (64 / 2)); let map_h = ((max_width + max_height) * (32 / 2)); map.style.setProperty("width" , map_w +"px" , ""); map.style.setProperty("height" , map_h +"px" , ""); for(let y=0; y<max_height; y++){ for(let x=0; x<max_width; x++){ let pos = this.getCoodinate2Position(x,y,max_height); let tile = document.createElement("img"); tile.style.setProperty("left", pos.x + "px",""); tile.style.setProperty("top" , pos.y + "px",""); tile.src = "1.png"; map.appendChild(tile); } } }; MAIN.prototype.getCoodinate2Position = function(x,y,max_height){ var w = 64; var h = 32; var pos_x = ((max_height - 1) * (w / 2)) + (x * (w / 2)) - (y * (w / 2)); var pos_y = (y * (h / 2)) + (x * (h / 2)); return { x:pos_x , y:pos_y }; }; switch(document.readyState){ case "complete" : new MAIN();break; case "interactive" : window.addEventListener("DOMContentLoaded" , (function(){new MAIN()}).bind(this));break; default : window.addEventListener("load" , (function(){new MAIN()}).bind(this));break; } })() これを実行すると、以下のような表示が完成。 今回は4x4の個数でのマップ表示をしてみましたが、数を増やして、オブジェクトを置けば、ゲームフィールドは完成しそうです。 まずは出だし上々ですね。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。