jsge
Version:
Javascript Game Engine
382 lines (332 loc) • 13.7 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="expires" content="Wen, 05 Jun 2024 07:01:00 GMT">
<title>JSDoc: Source: base/2d/DrawTiledLayer.js</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="stage-title">Source: base/2d/DrawTiledLayer.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>import { AnimationEvent } from "../AnimationEvent.js";
import { DrawShapeObject } from "./DrawShapeObject.js";
import { ImageTempStorage } from "../Temp/ImageTempStorage.js";
import { TiledLayerTempStorage } from "../Temp/TiledLayerTempStorage.js";
/**
* A render object represents a layer from tiled editor
* @see {@link DrawObjectFactory} should be created with factory method
*/
export class DrawTiledLayer {
#layerKey;
#tileMapKey;
#tilemap;
#tilesets;
/**
* @type {string}
*/
#DELIMITER = "-#-";
#tilesetImages;
/**
* @type {Array<ImageTempStorage>}
*/
#textureStorages;
#layerData;
#setBoundaries;
#drawBoundaries;
#attachedMaskId;
/**
* @type {number}
*/
#sortIndex = 0;
/**
* @type {Map<string, AnimationEvent>}
*/
#animations = new Map();
/**
* @type {boolean}
*/
#isOffsetTurnedOff;
/**
* @type {boolean}
*/
#isRemoved = false;
/**
* @hideconstructor
*/
constructor(layerKey, tileMapKey, tilemap, tilesets, tilesetImages, layerData, setBoundaries = false, shapeMask) {
this.#layerKey = layerKey;
this.#tileMapKey = tileMapKey;
this.#tilemap = tilemap;
this.#tilesets = tilesets;
this.#textureStorages = [];
this.#tilesetImages = tilesetImages;
this.#layerData = layerData;
this.#setBoundaries = setBoundaries;
this.#drawBoundaries = setBoundaries ? setBoundaries : false;
if (shapeMask) {
this.setMask(shapeMask);
}
this.#processData(tilesets, layerData);
}
/**
* A layer name.
* @type {string}
*/
get layerKey() {
return this.#layerKey;
}
/**
* A tilemap layer key, should match key from the tilemap.
* @type {string}
*/
get tileMapKey() {
return this.#tileMapKey;
}
get tilemap() {
return this.#tilemap;
}
get tilesets() {
return this.#tilesets;
}
get tilesetImages() {
return this.#tilesetImages;
}
get layerData() {
return this.#layerData;
}
/**
* Should the layer borders used as boundaries, or not
* Can be set in GameStage.addRenderLayer() method.
* @type {boolean}
*/
get setBoundaries() {
return this.#setBoundaries;
}
/**
* Should draw a boundaries helper, or not
* Can be set in SystemSettings.
* @type {boolean}
*/
get drawBoundaries() {
return this.#drawBoundaries;
}
set drawBoundaries(value) {
this.#drawBoundaries = value;
}
get isRemoved() {
return this.#isRemoved;
}
set isRemoved(value) {
this.#isRemoved = value;
}
/**
* @ignore
*/
get _maskId() {
return this.#attachedMaskId;
}
/**
*
* @param {DrawShapeObject} mask
*/
setMask(mask) {
mask._isMask = true;
this.#attachedMaskId = mask.id;
}
removeMask() {
this.#attachedMaskId = null;
}
/**
* @type {number}
*/
get sortIndex () {
return this.#sortIndex;
}
set sortIndex(value) {
this.#sortIndex = value;
}
get isOffsetTurnedOff() {
return this.#isOffsetTurnedOff;
}
turnOffOffset() {
this.#isOffsetTurnedOff = true;
}
/**
* Determines if image is animated or not
* @type {boolean}
*/
get hasAnimations() {
return this.#animations.size > 0;
}
/**
* @ignore
*/
get _textureStorages() {
return this.#textureStorages;
}
/**
* @ignore
*/
_setTextureStorage(index, value) {
this.#textureStorages[index] = value;
}
/**
* Tilesets has a property tiles, which could contain tile animations
* or object boundaries, this is workaround for split this and add
* additional properties for use in draw phase:
* _hasAnimations
* _animations - Map<id:activeSprite>
* _hasBoundaries
* _boundaries - Map<id:objectgroup>
* @param {*} tilesets
*/
#processData(tilesets, layerData) {
// границы для слоя создаются одни, даже если они высчитываются с разных тайлсетов
// поэтому суммируем и находим максимальное их количество
// также находим максимально возможное количество для текущего экрана
let ellipseBLen = 0,
pointBLen = 0,
polygonBLen = 0;
tilesets.forEach((tileset, idx) => {
const tiles = tileset.tiles,
name = tileset.name,
firstgid = tileset.firstgid,
nextTileset = this.tilesets[idx + 1],
nextgid = nextTileset ? nextTileset.firstgid : 1_000_000_000;
if (tiles) {
for (let tile of tiles) {
const animation = tile.animation,
objectgroup = tile.objectgroup,
id = tile.id;
if (animation) {
const eventName = name + this.#DELIMITER + id,
animationIndexes = this.#fixAnimationsItems(animation),
animationEvent = new AnimationEvent(eventName, animationIndexes, true);
this.#animations.set(eventName, animationEvent);
// add additional properties
if (!tileset._hasAnimations) {
tileset._hasAnimations = true;
tileset._animations = new Map();
//
tileset._animations.set(id, animationIndexes[0][0]);
}
this.#activateAnimation(animationEvent);
}
if (objectgroup && this.#setBoundaries) {
if (tileset._hasBoundaries) {
tileset._boundaries.set(id, objectgroup);
} else {
// add additional properties
tileset._hasBoundaries = true;
tileset._boundaries = new Map();
tileset._boundaries.set(id, objectgroup);
}
objectgroup.objects.forEach((object) => {
if (object.ellipse) {
const cellsWithB = layerData.data.filter((tile) => tile === id + firstgid).length;
ellipseBLen += (4 * cellsWithB); // (x, y, wRad, hRad) * layer items
} else if (object.point) {
const cellsWithB = layerData.data.filter((tile) => tile === id + firstgid).length;
pointBLen += (2 * cellsWithB); // (x, y) * layer items
} else if (object.polygon) {
const cellsWithB = layerData.data.filter((tile) => tile === id + firstgid).length;
polygonBLen += (object.polygon.length * 2 * cellsWithB); // (each point * 2(x,y) ) * layer items
} else { // rect object
const cellsWithB = layerData.data.filter((tile) => tile === id + firstgid).length;
polygonBLen += (16 * cellsWithB); // (4 faces * 4 cords for each one) * layer items
}
});
}
}
}
const nonEmptyCells = layerData.data.filter((tile) => ((tile >= firstgid) && (tile < nextgid))).length,
cells = layerData.data.length;
if (this.#setBoundaries) {
polygonBLen+=(nonEmptyCells * 16); // potential boundaries also nonEmptyCells
}
// создаем вспомогательный объект для расчетов и хранения данных отрисовки
// help class for draw calculations
tileset._temp = new TiledLayerTempStorage(cells, nonEmptyCells);
});
// save boundaries max possible lengths
layerData.ellipseBoundariesLen = ellipseBLen;
layerData.pointBoundariesLen = pointBLen;
layerData.polygonBoundariesLen = polygonBLen;
}
/**
*
* @param {Array<{duration:number, tileid:number}>} animation
* @returns {Array<{duration:number, id:number}>}
*/
#fixAnimationsItems(animation) {
return animation.map((animation_item) => ({duration:animation_item.duration, id: animation_item.tileid}));
}
/**
* @ignore
*/
_processActiveAnimations() {
for (let animationEvent of this.#animations.values()) {
if (animationEvent.isActive) {
animationEvent.iterateAnimationIndex();
this.#switchCurrentActiveSprite(animationEvent);
}
}
}
#activateAnimation = (animationEvent) => {
animationEvent.activateAnimation();
this.#switchCurrentActiveSprite(animationEvent);
};
#switchCurrentActiveSprite = (animationEvent) => {
const [tilesetKey, animationId] = animationEvent.name.split(this.#DELIMITER),
tilesetIndex = this.#tilesets.findIndex(tileset => tileset.name === tilesetKey),
tileset = this.#tilesets[tilesetIndex];
tileset._animations.set(parseInt(animationId), animationEvent.currentSprite);
};
/**
*
* @param {string} eventName - animation name
*/
stopRepeatedAnimation (eventName) {
this.#animations.get(eventName).deactivateAnimation();
}
/**
* Removes animations
*/
removeAllAnimations() {
for (let [eventName, animationEvent] of this.#animations.entries()) {
this.removeEventListener(eventName, animationEvent.activateAnimation);
animationEvent.deactivateAnimation();
}
this.#animations.clear();
this.#animations = undefined;
}
destroy() {
this.removeAllAnimations();
super.destroy();
}
}
</code></pre>
</article>
</section>
</div>
<nav>
<div class="switcher"><ul><li class="active"><a href="/">1.5.9</a></li></div>
<h2><a href="/">Home</a></h2><h3>Classes</h3><ul><li><a href="DrawCircleObject.html">DrawCircleObject</a></li><li><a href="DrawConusObject.html">DrawConusObject</a></li><li><a href="DrawImageObject.html">DrawImageObject</a></li><li><a href="DrawLineObject.html">DrawLineObject</a></li><li><a href="DrawObjectFactory.html">DrawObjectFactory</a></li><li><a href="DrawPolygonObject.html">DrawPolygonObject</a></li><li><a href="DrawRectObject.html">DrawRectObject</a></li><li><a href="DrawShapeObject.html">DrawShapeObject</a></li><li><a href="DrawTextObject.html">DrawTextObject</a></li><li><a href="DrawTiledLayer.html">DrawTiledLayer</a></li><li><a href="GameStage.html">GameStage</a></li><li><a href="GameStageData.html">GameStageData</a></li><li><a href="IExtension.html">IExtension</a></li><li><a href="INetwork.html">INetwork</a></li><li><a href="IRender.html">IRender</a></li><li><a href="ISystem.html">ISystem</a></li><li><a href="ISystemAudio.html">ISystemAudio</a></li><li><a href="RenderLoop.html">RenderLoop</a></li><li><a href="RenderLoopDebug.html">RenderLoopDebug</a></li><li><a href="System.html">System</a></li><li><a href="SystemSettings.html">SystemSettings</a></li></ul><h3>Tutorials</h3><ul><li><a href="tutorial-application_scheme.html">Application Scheme</a></li><li><a href="tutorial-assets_manager.html">Assets Manager</a></li><li><a href="tutorial-common_issues.html">Common Issues</a></li><li><a href="tutorial-how_to_add_and_use_audio.html">How to add and use audio</a></li><li><a href="tutorial-how_to_do_animations.html">How to Create Animations</a></li><li><a href="tutorial-how_to_load_and_use_tilemaps.html">How to Load and Use Tilemaps</a></li><li><a href="tutorial-quick_start.html">Quick Start</a></li><li><a href="tutorial-spine_animations.html">How to Add Spine Animations</a></li><li><a href="tutorial-stages_lifecycle.html">Stages Lifecycle</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Wed Jun 18 2025 06:53:54 GMT+0000 (Coordinated Universal Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>