Jaguar.js

Class: Map

collie. Map

new collie.Map(nTileWidth, nTileHeight, htOption)

extension/Map.js, line 63

2D Tiled Map - 2D Tiled Map is optimized canvas rendering. so you should set renderingMode option as "canvas" in a layer. but an object layer doesn't need to set canvas rendering.

Name Type Description
nTileWidth Number

타일 1개의 너비
nTileHeight Number

타일 1개의 높이
htOption Object
Name Type Default Description
useEvent Boolean true optional

맵을 움직이는 이벤트를 사용한다
useCache Boolean false optional

Canvas를 사용할 때, 맵의 크기가 작을 경우 전체 사이즈를 미리 만들어 놓는 방식을 사용한다
useLiveUpdate Boolean false optional

맵을 움직이는 중간에 타일을 업데이트 한다
updateInterval Number 150 optional

업데이트 주기를 설정한다. 단위는 ms
useLimitMoving Boolean true optional

맵을 벗어나게 움직일 수 없음
cacheTileSize Number 1 optional

화면 범위 밖의 타일을 사방에 해당 사이즈 크기만큼 미리 생성함
Example
// Make random data
var rowLength = 20;
var colLength = 20;
var objectCount = 10;
var tileSize = 30; // px
var mapData = [];
for (var row = 0; row < rowLength; row++) {
    var rowData = [];
    for (var col = 0; col < colLength; col++) {
        rowData.push({
            backgroundColor: Math.random() > 0.5 ? "red" : "yellow" // A Tile data doesn't necessary to contain dimension and position.
        });
    }
    mapData.push(rowData);
}


// Create a Map instance
var map = new collie.Map(tileSize, tileSize, {
    useEvent: true,
    useLiveUpdate : false
}).addTo(layer).addObjectTo(objectLayer);


// Add a mapdata.
map.setMapData(mapData);


// Add objects for display on the map.
for (var i = 0; i < objectCount; i++) {
    var tileX = Math.round(Math.random()  (colLength - 1));
    var tileY = Math.round(Math.random()  (rowLength - 1));
    var pos = map.getTileIndexToPos(tileX, tileY);
    map.addObject(tileX, tileY, new collie.DisplayObject({
        x : pos.x + 5,
        y : pos.y + 5,
        width : tileSize - 10,
        height : tileSize - 10,
        backgroundColor : "blue"
    }));
}


// Attach a event handler.
map.attach({
    mapclick : function (e) {
        console.log(e.tileX, e.tileY);
    }
});

Extends

Requires

  • module:collie.addon.js

Methods

addObject(nTileX, nTileY, oDisplayObject)

extension/Map.js, line 405

타일에 객체를 추가

Name Type Description
nTileX Number
nTileY Number
oDisplayObject collie.DisplayObject

addObjectTo(oLayer){collie.Map}

extension/Map.js, line 138

레이어에 Object을 바로 추가한다. 인터페이스의 통일성을 위해 추가함

Name Type Description
oLayer collie.Layer
Returns:
체이닝을 위한 반환 값

addTile(nTileX, nTileY, htOption)

extension/Map.js, line 367

맵을 개별적으로 생성한다

Name Type Description
nTileX Number
nTileY Number
htOption Object

addTo(oLayer){collie.Map}

extension/Map.js, line 126

레이어에 바로 추가한다. 인터페이스의 통일성을 위해 추가함

Name Type Description
oLayer collie.Layer
Returns:
체이닝을 위한 반환 값

inherited attach(vEvent, fHandler){collie.Component}

Component.js, line 142

이벤트 핸들러 추가

Name Type Description
vEvent Object | String
fHandler Function
Returns:
체이닝 지원

changeTile(nTileX, nTileY, htOption)

extension/Map.js, line 556

해당 타일의 옵션을 변경한다

Name Type Description
nTileX Number
nTileY Number
htOption Object

기존 옵션이 사라지는 것이 아니고 중첩된다

inherited detach(vEvent, fHandler)

Component.js, line 176

이벤트 핸들러를 해제한다

Name Type Description
vEvent Object | String
fHandler Function

값이 없을 경우 이 이벤트에 할당된 전체 핸들러를 해제한다

inherited detachAll(sName)

Component.js, line 208

모든 이벤트 핸들러를 해제

Name Type Description
sName String

이벤트 이름, 값이 없으면 이 컴포넌트에 할당된 모든 이벤트를 해제한다

inherited fireEvent(sName, oEvent){Boolean}

Component.js, line 111

이벤트 발생

Name Type Description
sName String
oEvent Object
Returns:
발생 중 collie.ComponentEvent의 stop 메소드가 실행될 경우 false를 반환한다

inherited get(sName){Variables}

Component.js, line 65

DisplayObject와 Layer의 서로 다른 인터페이스를 맞추기 위한 임시 메서드

Name Type Description
sName String
See:

getContainer(){collie.DisplayObject}

extension/Map.js, line 261
Returns:
DisplayObject를 반환

getObject(nTileX, nTileY, fFilter){collie.DisplayObject|Boolean}

extension/Map.js, line 633

필터를 이용해 해당 좌표에 등록된 객체를 가져온다

Name Type Description
nTileX Number
nTileY Number
fFilter Function

getObjectContainer(){collie.DisplayObject}

extension/Map.js, line 268
Returns:
컨테이너 DisplayObject를 반환

getObjects(nTileX, nTileY){Array|Boolean}

extension/Map.js, line 622

해당 좌표에 등록된 객체를 가져온다

Name Type Description
nTileX Number
nTileY Number

getPosition(){Object}

extension/Map.js, line 311

Container의 위치를 반환한다

Returns:
Name Type Description
htResult Object
Name Type Description
htResult.x Number
htResult.y Number

getPosToTileIndex(nX, nY){Object}

extension/Map.js, line 726

포지션으로 타일 인덱스를 구함

Name Type Description
nX Number
nY Number
Returns:
Name Type Description
htResult Object
Name Type Description
htResult.tileX Number
htResult.tileY Number

getSurroundedTiles(nTileX, nTileY){Array}

extension/Map.js, line 590

해당 타일을 둘러싼 타일 목록을 구한다

Name Type Description
nTileX Number
nTileY Number
Returns:
반환되지 않고 타일 정보가 반환 됨

getTile(nTileX, nTileY){Object|Boolean}

extension/Map.js, line 578

타일을 가져온다

Name Type Description
nTileX Number
nTileY Number
Returns:
반환되지 않고 타일 정보가 반환 됨

getTileCountOnScreen(){Number}

extension/Map.js, line 999

한 화면에 보이는 최대 타일 갯수 반환

getTileIndexToPos(nTileX, nTileY){Object}

extension/Map.js, line 710

타일 인덱스로 포지션을 구함

Name Type Description
nTileX Number
nTileY Number
Returns:
Name Type Description
htResult Object
Name Type Description
htResult.x Number
htResult.y Number

getTileXLength()

extension/Map.js, line 323

tileX 길이를 반환

Type Description
Number

getTileYLength()

extension/Map.js, line 332

tileY 길이를 반환

Type Description
Number

hasObject(nTileX, nTileY, fFilter){Boolean}

extension/Map.js, line 653

해당 좌표에 객체가 있는지 반환

Name Type Description
nTileX Number
nTileY Number
fFilter Function

isVisibleOffset(nTileX, nTileY){Boolean}

extension/Map.js, line 422

보여지는 영역에 속하는지 확인

Name Type Description
nTileX Number
nTileY Number

lock(){collie.Map}

extension/Map.js, line 503

화면을 움직이지 않게 한다

moveObject(nTileX, nTileY, 타일에)

extension/Map.js, line 454

등록돼 있는 객체를 옮김

Name Type Description
nTileX Number

옮길 타일 x
nTileY Number

옮길 타일 y
타일에 collie.DisplayObject

등록돼 있는 객체

inherited option(vName, vValue, bNotOverwrite)

Component.js, line 27

컴포넌트의 옵션을 설정한다.

Name Type Description
vName Object | String

옵션 이름이나 여러 옵션을 설정할 수 있는 객체를 넣을 수 있다.
vValue Variables optional

옵션 값, 값이 없다면 해당 옵션 값을 반환한다.
bNotOverwrite Boolean optional

이 값이 true면 기존에 값이 있을 경우 덮이 씌우지 않는다
Example
component.option({
 a : 1,
 b : true
});


component.option("a", 1);
component.option("a"); // return 1

inherited optionSetter(sName, fSetter)

Component.js, line 100

옵션 값이 설정될 때 실행될 함수를 지정한다. Setter는 한 속성 당 한 개의 함수만 설정할 수 있다.

Name Type Description
sName String
fSetter Function

removeObject(oDisplayObject)

extension/Map.js, line 466

타일에서 객체를 제거

Name Type Description
oDisplayObject collie.DisplayObject

removeTile(nTileX, nTileY)

extension/Map.js, line 543

타일을 지운다

Name Type Description
nTileX Number
nTileY Number

inherited set(sName, vValue, bNotOverwrite){Object}

Component.js, line 78

DisplayObject와 Layer의 서로 다른 인터페이스를 맞추기 위한 임시 메서드

Name Type Description
sName String
vValue Variables
bNotOverwrite Boolean optional
See:
Returns:
method chaining

setLayer(oLayer)

extension/Map.js, line 147

Map을 추가할 레이어를 설정한다

Name Type Description
oLayer collie.Layer

setMapData(aMapData)

extension/Map.js, line 340

맵을 일괄적으로 생성한다

Name Type Description
aMapData Array

맵 데이터 array[row][col] = htOption

setObjectLayer(oLayer)

extension/Map.js, line 234

Object을 추가할 레이어를 설정한다

Name Type Description
oLayer collie.Layer

setPosition(nX, nY)

extension/Map.js, line 278

Container의 위치를 설정한다

Name Type Description
nX Number
nY Number

unlock(){collie.Map}

extension/Map.js, line 513

화면을 움직이게 한다

inherited unset(sKey)

Component.js, line 88

옵션을 제거한다

Name Type Description
sKey String

unsetLayer()

extension/Map.js, line 213

Map을 레이어에서 제거한다

unsetMapData()

extension/Map.js, line 356

맵 데이터를 초기화 한다

unsetObjectLayer()

extension/Map.js, line 251

Object을 레이어에서 제거한다

Events

mapchange

extension/Map.js, line 934

맵의 타일이 변경됐을 때

Name Type Description
htEvent Object
Name Type Description
x Number

컨테이너 x 좌표
y Number

컨테이너 y 좌표
event HTMLEvent

이벤트 객체

mapchange

extension/Map.js, line 977

맵의 타일이 변경됐을 때

Name Type Description
htEvent Object
Name Type Description
x Number

컨테이너 x 좌표
y Number

컨테이너 y 좌표
startTileX Number

현재 화면 안에 있는 타일의 시작 인덱스
startTileY Number

현재 화면 안에 있는 타일의 시작 인덱스
endTileX Number

현재 화면 안에 있는 타일의 끝 인덱스
endTileY Number

현재 화면 안에 있는 타일의 끝 인덱스
event HTMLEvent

이벤트 객체

mapclick

extension/Map.js, line 842

맵을 클릭했을 때

Name Type Description
htEvent Object
Name Type Description
x Number

컨테이너 x 좌표
y Number

컨테이너 y 좌표
eventX Number

이벤트 x 좌표
eventY Number

이벤트 y 좌표
tileX Number

타일 x 인덱스
tileY Number

타일 y 인덱스
event HTMLEvent

이벤트 객체

mapdown

extension/Map.js, line 772

맵에 마우스나 터치를 시작했을 때

Name Type Description
htEvent Object
Name Type Description
x Number

컨테이너 x 좌표
y Number

컨테이너 y 좌표
eventX Number

이벤트 x 좌표
eventY Number

이벤트 y 좌표
event HTMLEvent

이벤트 객체

mapmove

extension/Map.js, line 754

맵이 이동할 떄

Name Type Description
htEvent Object
Name Type Description
x Number

컨테이너 x 좌표
y Number

컨테이너 y 좌표
event HTMLEvent

이벤트 객체

mapup

extension/Map.js, line 815

맵에 마우스나 터치가 끝났을 때

Name Type Description
htEvent Object
Name Type Description
x Number

컨테이너 x 좌표
y Number

컨테이너 y 좌표
eventX Number

이벤트 x 좌표
eventY Number

이벤트 y 좌표
event HTMLEvent

이벤트 객체
comments powered by Disqus