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

2021年1月13日

テクノロジー 特集

t f B! P L
ゲームは好きだけど、最近はあまりできていない、弓削田です。 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の個数でのマップ表示をしてみましたが、数を増やして、オブジェクトを置けば、ゲームフィールドは完成しそうです。 まずは出だし上々ですね。

このブログを検索

プロフィール

自分の写真
町田市, 東京都, Japan
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出。

ブログ アーカイブ

QooQ