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