![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMaC2eJB1Mut5Exx7V_xatQXWWBE5Ez_jZVN_cYyQteW9PfUejFQjkDxJE2WB7P5va22afw6iw3u5XQpC-9Wk1jmIozQgcCQnv8f-VUY-UisDz-hNBWE4U2sPpCLaM1hHbFXplFU67FuGnCD3MurCwYwiUy3wE0jUP87fuTPm6I8QdSxv99uFoDG2S/s1600-rw/flower-field-250016_1280.jpg)
ゲームは好きだけど、最近はあまりできていない、弓削田です。
RPGゲームシステムを作る時に、とりあえず、土台となるフィールドをjavascriptを使って作ってみたいと思います。
仕様
クォータービューの基礎となる、四角形をタイル状に並べるだけの処理をい実装します。
まずは、タイル部分のテクスチャを用意。
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAMAAACVQ462AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAxQTFRFXocVv+OKj8Qf////Mq3FiwAAAAR0Uk5T////AEAqqfQAAACjSURBVHjapNVZDoMwDEDBob3/nUtFK7YstskvvBGC4Hg/XMaXl3U9AJblta4xYZbPCPN8TIjkI0Is7xOieY8Qz9uETN4i5PI7IZtfCfn8TKjkR0It3wnV/E+o59/F+gTU8987qBEcvkKe4LIPcgSNnRgn6PwLMYLB3zgnmMyDMUFgIvUJgjOxTZCYyneC5LlwJiicTDtB8WzcCB6czpjc8RFgAGzcE0eb0VGIAAAAAElFTkSuQmCC)
これを何個も並べるだけ。
フィールド表示
基本となる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に普通に貼り付けてみると、
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaIL6zNrSnM2odRTsIijMegEN3B9Fe6jLnHHXg2-7XcRX6_4vY-am2oDxECARWpMvhlVcnH_SP8VO5oVmgK0SE33uvgSOukgQ546rq63l3FZg5LpYiJzEd6rnx3EIlWOJa3pCgFhUO_LaDGIGUE8PBFr1GDSdbZDbPL1HRQDQJxchS4z9UxqsIGdyt_hc/s1600-rw/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20%287%29.jpeg)
この時の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;
}
})()
これを実行すると、以下のような表示が完成。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1rUSI0ZtL7pCj-qIW_35xlbDXmqzLA5VSUvlUMetNYRdUMTU-W5gSR-SAr9wlEq_i9gJS_mRWU2kx-Hblbui3bT6GQBJ6Un4tiLG2ilqilhA9_KnqgzEkRSZorhDWlZrEt-Gnx6-3yolZ0kR11bgEkGvMgAP8oUjIZOJjpHvpO9Wjj84aUypWIS_guPw/s1600-rw/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20%288%29.jpeg)
今回は4x4の個数でのマップ表示をしてみましたが、数を増やして、オブジェクトを置けば、ゲームフィールドは完成しそうです。
まずは出だし上々ですね。
0 件のコメント:
コメントを投稿