Mal/mr-crocs-adventures
Mal/mr-crocs-adventures
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Graveyard terrain and background tiles implemented

Browse Source
This commit is contained in:
Mal 2025-05-16 23:08:35 +02:00
parent e97c04ed19
commit fc990c12aa
25 changed files with 504 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
graphics/background-graveyard.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
graphics/tileset/graveyard-background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
graphics/tileset/graveyard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 298 KiB

8
js/Game.js
View File

@ -69,8 +69,8 @@ export class Game
this.context.clearRect(0, 0, window.innerWidth, window.innerHeight);
this.architecture.draw(this.context, this.camera);
this.mrCroc.draw(this.context, this.camera);
this.gisela.draw(this.context, this.camera);
this.mrCroc.draw(this.context, this.camera);
for (const effect of this.level.fullscreenEffects) {
effect.update(timestamp);
@ -238,9 +238,9 @@ export class Game
this.isPaused = false;
for (const effect of this.level.fullscreenEffects) {
effect.init();
}
for (const effect of this.level.fullscreenEffects) {
effect.init();
}
window.requestAnimationFrame(loopFunction);
}

24
js/GraphicSet.js
View File

@ -1,4 +1,4 @@
let GraphicSet = [
const GraphicSet = [
{
name: 'Nature',
tileset: 'landscape01.jpg',
@ -9,6 +9,7 @@ let GraphicSet = [
tilePreview: 5,
primaryTiles: 8,
gravity: 9.806,
tilesetBackground: null,
},
{
name: 'Moon',
@ -20,6 +21,7 @@ let GraphicSet = [
tilePreview: 1,
primaryTiles: 2,
gravity: 2.4515,
tilesetBackground: null,
},
{
name: 'Death Star',
@ -31,6 +33,7 @@ let GraphicSet = [
tilePreview: 3,
primaryTiles: 6,
gravity: 9.806,
tilesetBackground: null,
},
{
name: 'Nature 2.0',
@ -42,6 +45,7 @@ let GraphicSet = [
tilePreview: 46,
primaryTiles: 3,
gravity: 9.806,
tilesetBackground: null,
},
{
name: 'Io',
@ -53,6 +57,7 @@ let GraphicSet = [
tilePreview: 2,
primaryTiles: 6,
gravity: 1.796,
tilesetBackground: null,
},
{
name: 'Southpole',
@ -64,7 +69,24 @@ let GraphicSet = [
tilePreview: 2,
primaryTiles: 7,
gravity: 9.806,
tilesetBackground: null,
},
{
name: 'Graveyard',
tileset: 'graveyard.png',
tiles: 304,
scale: 1,
backgroundColor: '#000000',
backgroundImage: 'background-graveyard.jpg',
tilePreview: 2,
primaryTiles: 19,
gravity: 9.806,
tilesetBackground: {
path: 'graveyard-background.png',
tiles: 2,
scale: 1,
}
}
];
export default GraphicSet;

23
js/Level.js
View File

@ -6,10 +6,15 @@ export default class Level
{
static FACTOR_GRAVITY = 4.903;
/**
* @param {Terrain} terrain
*/
constructor(terrain)
{
/** @type {Terrain} */
this.terrain = terrain;
this.fullscreenEffects = [];
this.fullscreenEffects = [];
this.gravity = 2.0;
}
@ -78,7 +83,7 @@ export default class Level
this.gravity = gravity;
}
static createFromFile(filename, callback = () => {})
static createFromFile(filename, onLoad = () => {})
{
let loader = new FileLoader(filename);
loader.onLoad = (data) => {
@ -86,6 +91,12 @@ export default class Level
const level = new Level(Terrain.createFromJson(json));
level.setGravity(json.gravity / Level.FACTOR_GRAVITY);
for (const oldEffect of level.fullscreenEffects) {
oldEffect.destroy();
}
level.fullscreenEffects = [];
if (json.hasOwnProperty('effects')) {
const effectFactory = new FullscreenEffectFactory();
@ -96,7 +107,7 @@ export default class Level
}
}
callback(level);
onLoad(level);
}
loader.loadContent();
}
@ -109,6 +120,12 @@ export default class Level
const level = new Level(terrain);
level.setGravity(data.gravity / Level.FACTOR_GRAVITY);
for (const oldEffect of level.fullscreenEffects) {
oldEffect.destroy();
}
level.fullscreenEffects = [];
if (data.hasOwnProperty('effects')) {
const effectFactory = new FullscreenEffectFactory();

4
js/effects/FullscreenEffect.js
View File

@ -11,6 +11,10 @@ export class FullscreenEffect
{
}
destroy()
{
}
update(timestamp)
{
}

8
js/effects/RainEffect.js
View File

@ -48,4 +48,12 @@ export class RainEffect extends FullscreenEffect
}
}
}
destroy()
{
super.destroy();
this.sound.pause();
this.sound.remove();
}
}

8
js/effects/SnowEffect.js
View File

@ -48,4 +48,12 @@ export class SnowEffect extends FullscreenEffect
}
}
}
destroy()
{
super.destroy();
this.audio.pause();
this.audio.remove();
}
}

15
js/effects/ThunderstormEffect.js
View File

@ -18,6 +18,7 @@ export class ThunderstormEffect extends FullscreenEffect
new Audio('js/effects/thunder04.mp3'),
];
this.currentSound = 0;
this.isActive = true;
}
shuffleSounds(iterations = 10)
@ -60,6 +61,10 @@ export class ThunderstormEffect extends FullscreenEffect
setTimeout(
() => {
if (!this.isActive) {
return;
}
if (this.currentSound === 0) {
this.shuffleSounds();
}
@ -85,4 +90,14 @@ export class ThunderstormEffect extends FullscreenEffect
context.fillStyle = 'rgba(255, 255, 255, ' + this.currentAlpha + ')';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}
destroy()
{
this.isActive = false;
for (const sound of this.sounds) {
sound.pause();
sound.remove();
}
}
}

4
js/module.js
View File

@ -75,6 +75,10 @@ function loadLevel(level)
if (graphicSet.backgroundImage !== null) {
loader.addImage(Setting.GRAPHICS_LOCATION + graphicSet.backgroundImage);
}
if (graphicSet.tilesetBackground !== null) {
loader.addImage(Setting.TILESET_LOCATION + graphicSet.tilesetBackground.path);
}
}
loader.load();

136
js/retro/RetroArchitecture.js
View File

@ -5,24 +5,69 @@ import GeometryPoint from "../geometry/GeometryPoint.js";
import GeometryRect from "../geometry/GeometryRect.js";
import GraphicSet from "../GraphicSet.js";
import Setting from "../Setting.js";
import Camera from "../Camera.js";
import Level from "../Level.js";
export default class RetroArchitecture
{
constructor(tilesetSprite, tiles, columns, rows)
/**
* @param {{sprite: RetroSprite, tiles: number}} retroTileset
* @param {number} columns
* @param {number} rows
* @param {{sprite: RetroSprite, tiles: number}} retroTilesetBackground
*/
constructor(retroTileset, columns, rows, retroTilesetBackground = null)
{
this.tilesetSprite = tilesetSprite;
this.tiles = tiles;
/** @type {RetroSprite} */
this.tilesetSprite = retroTileset.sprite;
/** @type {RetroSprite|null} */
this.tilesetSpriteBackground = retroTilesetBackground !== null
? retroTilesetBackground.sprite
: null;
/** @type {number} */
this.tiles = retroTileset.tiles;
/** @type {number} */
this.tilesBackground = retroTilesetBackground !== null
? retroTilesetBackground.tiles
: 0;
/** @type {string|null} */
this.backgroundColor = null;
/** @type {string|null} */
this.backgroundImage = null;
/** @type {number} */
this.rows = rows;
/** @type {number} */
this.columns = columns;
/** @type {Array<Array<RetroArchitectureTile>>} */
this.matrix = [];
/** @type {number} */
this.tileWidth = this.tilesetSprite.getWidth() / this.tiles;
/** @type {number} */
this.tileHeight = this.tilesetSprite.getHeight();
/** @type {number} */
this.startX = 0;
/** @type {number} */
this.startY = 0;
/** @type {number} */
this.targetX = 0;
/** @type {number} */
this.targetY = 0;
/** @type {GeometryPoint} */
this.targetPosition = new GeometryPoint(this.targetX, this.targetY);
this.init();
@ -41,16 +86,26 @@ export default class RetroArchitecture
}
}
/**
* @param {string|null} color
*/
setBackgroundColor(color)
{
this.backgroundColor = color;
}
/**
* @param {string|null} image
*/
setBackgroundImage(image)
{
this.backgroundImage = image;
}
/**
* @param {GeometryRect} rect
* @returns {GeometryRectCollection}
*/
getCollisionRects(rect)
{
let posX = Math.floor(rect.position.x / this.tileWidth) - 2;
@ -62,8 +117,13 @@ export default class RetroArchitecture
for (let y = Math.max(0, posY); y < rangeY; y++) {
for (let x = Math.max(0, posX); x < rangeX; x++) {
if (y < this.matrix.length && x < this.matrix[y].length && this.matrix[y][x] !== null) {
if (
y < this.matrix.length &&
x < this.matrix[y].length &&
this.matrix[y][x] !== null && this.matrix[y][x].tile.index > -1
) {
let intersection = this.matrix[y][x].rect.getRectIntersection(rect);
if (intersection !== null) {
collection.addRect(intersection);
}
@ -83,7 +143,7 @@ export default class RetroArchitecture
for (let y = Math.max(0, posY); y < rangeY; y++) {
for (let x = Math.max(0, posX); x < rangeX; x++) {
if (this.matrix[y][x] !== null) {
if (this.matrix[y][x] !== null && this.matrix[y][x].tile.index > -1) {
if (this.matrix[y][x].rect.getRectIntersection(rect) !== null) {
return true;
}
@ -111,7 +171,10 @@ export default class RetroArchitecture
let tilePosition = this.getTileForPosition(position, 0);
while (tilePosition !== null && tilePosition.y > 0) {
if (this.matrix[tilePosition.y][tilePosition.x] !== null) {
if (
this.matrix[tilePosition.y][tilePosition.x] !== null &&
this.matrix[tilePosition.y][tilePosition.x].tile.index > -1
) {
return tilePosition.y * this.tileHeight + this.tileHeight;
}
@ -126,7 +189,10 @@ export default class RetroArchitecture
let tilePosition = this.getTileForPosition(position);
while (tilePosition !== null && tilePosition.y < this.rows) {
if (this.matrix[tilePosition.y][tilePosition.x] !== null) {
if (
this.matrix[tilePosition.y][tilePosition.x] !== null &&
this.matrix[tilePosition.y][tilePosition.x].tile.index > -1
) {
return tilePosition.y * this.tileHeight;
}
@ -141,7 +207,10 @@ export default class RetroArchitecture
let tilePosition = this.getTileForPosition(new GeometryPoint(position.x, position.y), 1, 0);
while (tilePosition !== null && tilePosition.x < this.columns) {
if (this.matrix[tilePosition.y][tilePosition.x] !== null) {
if (
this.matrix[tilePosition.y][tilePosition.x] !== null &&
this.matrix[tilePosition.y][tilePosition.x].tile.index > -1
) {
return tilePosition.x * this.tileWidth;
}
@ -156,7 +225,10 @@ export default class RetroArchitecture
let tilePosition = this.getTileForPosition(new GeometryPoint(position.x, position.y), -1,0);
while (tilePosition !== null && tilePosition.x > 0) {
if (this.matrix[tilePosition.y][tilePosition.x] !== null) {
if (
this.matrix[tilePosition.y][tilePosition.x] !== null &&
this.matrix[tilePosition.y][tilePosition.x].tile.index > -1
) {
return tilePosition.x * this.tileWidth + this.tileWidth;
}
@ -183,8 +255,8 @@ export default class RetroArchitecture
setMovableToTargetPosition(movable)
{
movable.position.x = this.tileWidth * this.targetX + this.tileWidth * 0.5;
movable.position.y = this.tileHeight * this.targetY + this.tileHeight;
movable.position.x = this.tileWidth * this.targetX + this.tileWidth * 0.5;
movable.position.y = this.tileHeight * this.targetY + this.tileHeight;
}
isMovableInsideTargetPosition(movable)
@ -213,8 +285,14 @@ export default class RetroArchitecture
for (let x = viewX; x < viewWidth; x++) {
let field = this.matrix[y][x];
if (field !== null) {
if (field === null || field.tile.index === -1) {
continue;
}
if (field.tile.index > -1) {
this.drawField(context, x, y, camera, field);
} else {
this.drawBackgroundField(context, x, y, camera, field);
}
}
}
@ -235,25 +313,47 @@ export default class RetroArchitecture
);
}
drawBackgroundField(context, x, y, camera, field)
{
context.drawImage(
this.tilesetSpriteBackground.canvas,
-(field.tile.index % 2) * this.tileWidth,
0,
this.tileWidth,
this.tileHeight,
Math.round(x * this.tileWidth - camera.position.x),
Math.round(y * this.tileHeight - camera.position.y),
this.tileWidth,
this.tileHeight,
);
}
getStartPosition()
{
return new GeometryPoint(this.startX * this.tileWidth, this.startY * this.tileHeight);
}
/**
* @param {Level} level
*/
static createFromData(level)
{
let graphicSet = GraphicSet[level.getTilesetId()];
let tileset = new RetroSprite(
const tilesetSprite = new RetroSprite(
Setting.TILESET_LOCATION + graphicSet.tileset,
graphicSet.scale
);
let architecture = new RetroArchitecture(
tileset,
graphicSet.tiles,
const tilesetBackground = level.terrain.tileset.background !== null
? new RetroSprite(level.terrain.tileset.background.image.src)
: null;
const architecture = new RetroArchitecture(
{sprite: tilesetSprite, tiles: graphicSet.tiles},
level.getColumns(),
level.getRows()
level.getRows(),
tilesetBackground === null ? null : {sprite: tilesetBackground, tiles: level.terrain.tileset.background.tiles}
);
architecture.setBackgroundColor(graphicSet.backgroundColor);
@ -267,7 +367,7 @@ export default class RetroArchitecture
for (let y = 0; y < level.getRows(); y++) {
for (let x = 0; x < level.getColumns(); x++) {
if (level.getTilesetMatrix()[y][x].index > -1) {
if (level.getTilesetMatrix()[y][x].index !== -1) {
architecture.matrix[y][x] = new RetroArchitectureTile(
level.getTilesetMatrix()[y][x],
x * architecture.tileWidth,

1
tilorswift/js/BrushMode.js
View File

@ -2,6 +2,7 @@ const BrushMode = {
TERRAIN: 1,
ENTRANCE: 2,
EXIT: 3,
BACKGROUND: 4,
};
export default BrushMode;

30
tilorswift/js/ButtonBackgroundTile.js Normal file
View File

@ -0,0 +1,30 @@
import ButtonTile from "./ButtonTile.js";
import TilorswiftButtonBackgroundTileClickedEvent from "./events/TilorswiftButtonBackgroundTileClickedEvent.js";
import Tileset from "./Tileset.js";
export default class ButtonBackgroundTile extends ButtonTile
{
/**
* @param {Tileset} tileset
* @param {number} index
*/
constructor(tileset, index = 0)
{
super(tileset, index);
}
initHtml() {
this.htmlElement = document.createElement('div');
this.className = 'field';
this.setupElement();
}
initEventListeners() {
this.htmlElement.addEventListener(
'mousedown',
() => {
window.dispatchEvent(new TilorswiftButtonBackgroundTileClickedEvent(this));
}
)
}
}

5
tilorswift/js/ButtonTile.js
View File

@ -1,8 +1,13 @@
import Field from "./Field.js";
import TilorswiftButtonTileClickedEvent from "./events/TilorswiftButtonTileClickedEvent.js";
import Tileset from "./Tileset.js";
export default class ButtonTile extends Field
{
/**
* @param {Tileset} tileset
* @param {number} index
*/
constructor(tileset, index = 0)
{
super(tileset, 0, 0, index);

56
tilorswift/js/Field.js
View File

@ -3,6 +3,12 @@ import TilorswiftFieldEnteredEvent from "./events/TilorswiftFieldEnteredEvent.js
export default class Field
{
/**
* @param {Tileset} tileset
* @param {number} x
* @param {number} y
* @param {number} index
*/
constructor(tileset, x = 0, y = 0, index = -1)
{
this.tileset = tileset;
@ -11,6 +17,9 @@ export default class Field
this.y = y;
this.isEntrancePoint = false;
this.isTargetPoint = false;
this.entrancePoint = null;
this.targetPoint = null;
this.initHtml();
this.initEventListeners();
}
@ -50,21 +59,42 @@ export default class Field
this.htmlElement.style.width = String(this.tileset.getTileWidth()) + 'px';
this.htmlElement.style.height = String(this.tileset.getTileHeight()) + 'px';
this.htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileHeight() + 'px';
this.htmlElement.style.backgroundImage = 'url("' + this.tileset.image.src + '")';
this.htmlElement.style.backgroundPositionX = -this.index * this.tileset.getTileWidth() + 'px';
this._setupBackgroundImage();
this._setupBackgroundPosition();
}
_setupBackgroundImage()
{
const url = this.index >= -1
? this.tileset.image.src
: this.tileset.background.image.src;
this.htmlElement.style.backgroundImage = 'url("' + url + '")';
}
_setupBackgroundPosition()
{
const position = this.index >= -1
? -this.index * this.tileset.getTileWidth()
: (this.index % this.tileset.background.tiles) * this.tileset.getTileWidth();
this.htmlElement.style.backgroundPositionX = String(position) + 'px';
}
addSelector()
{
let hoverElement = document.createElement('div');
hoverElement.classList.add('selection');
this.htmlElement.appendChild(hoverElement);
}
setIndex(index)
{
this.index = index;
this.htmlElement.style.backgroundPositionX = -this.index * this.tileset.getTileWidth() + 'px';
this._setupBackgroundPosition();
this._setupBackgroundImage();
}
setEntrancePoint(bool)
@ -72,9 +102,15 @@ export default class Field
this.isEntrancePoint = bool;
if (this.isEntrancePoint) {
this.htmlElement.classList.add('entrance');
this.entrancePoint = document.createElement('div');
this.entrancePoint.classList.add('entrance');
this.htmlElement.appendChild(this.entrancePoint);
} else {
this.htmlElement.classList.remove('entrance');
if (this.entrancePoint instanceof HTMLElement) {
this.entrancePoint.remove();
this.entrancePoint = null;
}
}
}
@ -83,9 +119,15 @@ export default class Field
this.isTargetPoint = bool;
if (this.isTargetPoint) {
this.htmlElement.classList.add('target');
this.targetPoint = document.createElement('div');
this.targetPoint.classList.add('target');
this.htmlElement.appendChild(this.targetPoint);
} else {
this.htmlElement.classList.remove('target');
if (this.targetPoint instanceof HTMLElement) {
this.targetPoint.remove();
this.targetPoint = null;
}
}
}

27
tilorswift/js/Terrain.js
View File

@ -5,9 +5,17 @@ import GraphicSet from "../../js/GraphicSet.js";
export default class Terrain
{
/**
* @param {Tileset} tileset
* @param {number} tilesX
* @param {number} tilesY
* @param {string} backgroundColor
*/
constructor(tileset, tilesX, tilesY, backgroundColor = 'black')
{
/** @type {Tileset} */
this.tileset = tileset;
this.fields = [];
this.tilesX = tilesX;
this.tilesY = tilesY;
@ -19,6 +27,7 @@ export default class Terrain
this.backgroundImage = undefined;
this.htmlElement = document.createElement('table');
this.brushTileIndex = 0;
this.brushBackdroundTileIndex = 0;
this.init();
}
@ -38,7 +47,14 @@ export default class Terrain
(event) => {
this.brushTileIndex = event.button.index;
}
)
);
window.addEventListener(
TilorswiftEvent.BACKGROUND_BUTTON_TILE_CLICKED,
(event) => {
this.brushTileIndex = event.button.index;
}
);
}
getElement()
@ -106,8 +122,6 @@ export default class Terrain
addColumns(index, quantity = 1)
{
console.log(this.fields);
for (let c = 0; c < quantity; c++) {
this._insertColumn(index);
this.tilesX++;
@ -122,8 +136,6 @@ export default class Terrain
}
this.htmlElement.style.width = this.tileset.getTileWidth() * this.tilesX + 'px';
console.log(this.fields);
}
_insertColumn(index = undefined)
@ -149,7 +161,7 @@ export default class Terrain
setEntrancePoint(tileX, tileY)
{
if (this.fields[tileY][tileX].index === -1) {
if (this.fields[tileY][tileX].index < 0) {
if (this.entranceTileX !== undefined && this.entranceTileY !== undefined) {
this.fields[this.entranceTileY][this.entranceTileX].setEntrancePoint(false);
}
@ -163,7 +175,7 @@ export default class Terrain
setTargetPoint(tileX, tileY)
{
if (this.fields[tileY][tileX].index === -1) {
if (this.fields[tileY][tileX].index < 0) {
if (this.targetTileX !== undefined && this.targetTileY !== undefined) {
this.fields[this.targetTileY][this.targetTileX].setTargetPoint(false);
}
@ -203,6 +215,7 @@ export default class Terrain
const graphicSet = GraphicSet[levelData.tileset];
const tileset = new Tileset(levelData.tileset);
const terrain = new Terrain(tileset, levelData.columns, levelData.rows, graphicSet.backgroundColor);
terrain.backgroundImage = graphicSet.backgroundImage ?? undefined;

33
tilorswift/js/Tileset.js
View File

@ -3,41 +3,74 @@ import Setting from "../../js/Setting.js";
export default class Tileset
{
/**
* @param {number} setId
*/
constructor(setId)
{
/** @type {number} */
this.setId = setId;
/** @type {Image} */
this.image = new Image();
this.image.src = '../' + Setting.TILESET_LOCATION + GraphicSet[this.setId].tileset;
/** @type {number} */
this.tiles = GraphicSet[this.setId].tiles;
/** @type {number} */
this.scale = GraphicSet[this.setId].scale;
/** @type {number} */
this.primaryTiles = GraphicSet[this.setId].primaryTiles;
/** @type {{image: Image, tiles: number, scale: number}|null} */
this.background = null;
if (GraphicSet[this.setId].tilesetBackground !== null) {
const backgroundImage = new Image();
backgroundImage.src = '../' + Setting.TILESET_LOCATION +
GraphicSet[this.setId].tilesetBackground.path;
this.background = {
image: backgroundImage,
tiles: GraphicSet[this.setId].tilesetBackground.tiles,
scale: GraphicSet[this.setId].tilesetBackground.scale,
};
}
}
/** @returns {number} */
getWidth()
{
return this.image.width * this.scale;
}
/** @returns {number} */
getHeight()
{
return this.image.height * this.scale;
}
/** @returns {number} */
getTileWidth()
{
return this.image.width / this.tiles * this.scale;
}
/** @returns {number} */
getTileHeight()
{
return this.image.height * this.scale;
}
/** @returns {boolean} */
hasExtendedTiles()
{
return GraphicSet[this.setId].tiles > GraphicSet[this.setId].primaryTiles ;
}
/** @returns {number} */
getTileIndexFactor(code)
{
const CODES = ['ltr', 't', 'r', 'b', 'l', 'lt', 'tr', 'ltb', 'tb', 'trb', 'lb', 'rb', 'ltrb', 'lr', 'lrb'];

42
tilorswift/js/Tilorswift.js
View File

@ -5,6 +5,7 @@ import Brush from "./Brush.js";
import Tileset from "./Tileset.js";
import WidgetBar from "./menu/WidgetBar.js";
import TilesetPickerWidget from "./menu/TilesetPickerWidget.js";
import BackgroundPickerWidget from "./menu/BackgroundPickerWidget.js";
import EntrancePointWidget from "./menu/EntrancePointWidget.js";
import TargetPointWidget from "./menu/TargetPointWidget.js";
import Mouse from "./Mouse.js";
@ -38,8 +39,8 @@ export default class Tilorswift
{
static EFFECT_NAMES = {
[SnowEffect.NAME]: 'Schnee',
[RainEffect.NAME]: 'Regen',
[ThunderstormEffect.NAME]: 'Gewitter',
[RainEffect.NAME]: 'Regen',
[ThunderstormEffect.NAME]: 'Gewitter',
}
constructor(level) {
@ -52,6 +53,8 @@ export default class Tilorswift
this.widgetBar.addWidget(this.tilesetPicker);
this.intelligentBrushSwitch = new IntelligentBrushSwitch(this.tilesetPicker, this.brush);
this.widgetBar.addWidget(this.intelligentBrushSwitch);
this.backgroundPicker = new BackgroundPickerWidget(this.tileset, this.brush);
this.widgetBar.addWidget(this.backgroundPicker);
this.entrancePicker = new EntrancePointWidget(this.widgetBar, this.brush);
this.widgetBar.addWidget(this.entrancePicker);
this.targetPicker = new TargetPointWidget(this.widgetBar, this.brush);
@ -77,7 +80,7 @@ export default class Tilorswift
const menuLevel = new MenuGroup('Level');
menuLevel.addMenuEntry(new MainMenuEntry('Gravitation...', TilorswiftMenuGravityClickedEvent));
menuLevel.addMenuEntry(new MainMenuEntry('Effekte...', TilorswiftMenuEffectsClickedEvent));
menuLevel.addMenuEntry(new MainMenuEntry('Effekte...', TilorswiftMenuEffectsClickedEvent));
this.mainbar.addMenuGroup(menuLevel);
document.body.appendChild(this.mainbar.getElement());
@ -109,7 +112,7 @@ export default class Tilorswift
targetY: this.level.getTargetY(),
gravity: this.level.gravity,
matrix: matrix,
effects: this.level.fullscreenEffects.map((effect) => {return effect.getName()}),
effects: this.level.fullscreenEffects.map((effect) => {return effect.getName()}),
};
return JSON.stringify(data);
@ -119,7 +122,6 @@ export default class Tilorswift
{
const dialog = new LoadLevelDialog();
dialog.onLoad = (json) => {
console.log(json);
this.tileset = new Tileset(JSON.parse(json).tileset);
this.level = Level.createFromJson(json);
this.loadLevel();
@ -142,6 +144,7 @@ export default class Tilorswift
this.map.innerHTML = '';
this.map.appendChild(this.level.terrain.getElement());
this.tilesetPicker.reloadTileset(this.tileset);
this.backgroundPicker.reloadTileset(this.tileset);
this.initializeIntelligentBrushWidget();
}
@ -222,10 +225,15 @@ export default class Tilorswift
}
}
addBackground(field)
{
field.setIndex(this.level.terrain.brushTileIndex);
}
updateNeighbours(field)
{
for (const neighbour of this.level.terrain.getFieldNeighbours(field)) {
if (neighbour.index === -1) {
if (neighbour.index <= -1) {
continue;
}
@ -262,15 +270,24 @@ export default class Tilorswift
this.removeTerrain(event.getField());
break;
}
} else if (this.brush.mode === BrushMode.BACKGROUND && !event.getField().isEntrancePoint) {
switch (event.button) {
case 0:
this.addBackground(event.getField());
break;
case 2:
this.removeTerrain(event.getField());
break;
}
} else if (this.brush.mode === BrushMode.ENTRANCE) {
if (event.getField().index === -1) {
if (event.getField().index < 0) {
const coordinates = this.level.terrain.getFieldCoordinates(event.getField());
this.level.terrain.setEntrancePoint(coordinates.x, coordinates.y);
this.brush.mode = BrushMode.TERRAIN;
this.widgetBar.enableWidgets();
}
} else if (this.brush.mode === BrushMode.EXIT) {
if (event.getField().index === -1) {
if (event.getField().index < 0) {
const coordinates = this.level.terrain.getFieldCoordinates(event.getField());
this.level.terrain.setTargetPoint(coordinates.x, coordinates.y);
this.brush.mode = BrushMode.TERRAIN;
@ -291,7 +308,14 @@ export default class Tilorswift
TilorswiftEvent.FIELD_ENTERED,
(event) => {
if (this.mouse.isPressedLeft) {
this.addTerrain(event.getField());
switch (this.brush.mode) {
case BrushMode.TERRAIN:
this.addTerrain(event.getField());
break;
case BrushMode.BACKGROUND:
this.addBackground(event.getField());
break;
}
} else if (this.mouse.isPressedRight) {
event.getField().setIndex(-1);
}

9
tilorswift/js/events/TilorswiftBackgroundButtonClickedEvent.js Normal file
View File

@ -0,0 +1,9 @@
import TilorswiftEvent from "./TilorswiftEvent.js";
export default class TilorswiftBackgroundButtonTileClickedEvent extends Event
{
constructor(button) {
super(TilorswiftEvent.BACKGROUND_BUTTON_TILE_CLICKED);
this.button = button;
}
}

9
tilorswift/js/events/TilorswiftButtonBackgroundTileClickedEvent.js Normal file
View File

@ -0,0 +1,9 @@
import TilorswiftEvent from "./TilorswiftEvent.js";
export default class TilorswiftButtonBackgroundTileClickedEvent extends Event
{
constructor(button) {
super(TilorswiftEvent.BACKGROUND_BUTTON_TILE_CLICKED);
this.button = button;
}
}

1
tilorswift/js/events/TilorswiftEvent.js
View File

@ -2,6 +2,7 @@ const TilorswiftEvent = {
FIELD_CLICKED: 'fieldClicked',
FIELD_ENTERED: 'fieldEntered',
BUTTON_TILE_CLICKED: 'buttonTileClicked',
BACKGROUND_BUTTON_TILE_CLICKED: 'backgroundButtonTileClicked',
MENU_SAVE_CLICKED: 'menuSaveClicked',
MENU_OPEN_CLICKED: 'menuOpenClicked',
DIALOG_BUTTON_OK_CLICKED: 'dialogButtonOkClicked',

102
tilorswift/js/menu/BackgroundPickerWidget.js Normal file
View File

@ -0,0 +1,102 @@
import Widget from "./Widget.js";
import BrushMode from "../BrushMode.js";
import TilorswiftEvent from "../events/TilorswiftEvent.js";
import ButtonBackgroundTile from "../ButtonBackgroundTile.js";
import Tileset from "../Tileset.js";
export default class BackgroundPickerWidget extends Widget
{
constructor(tileset, brush)
{
super('Hintergrund');
this.tileset = tileset;
this.brush = brush;
this.htmlElement = this.createElementPicker();
this.htmlElementSelector = this.createElementSelector();
this.htmlElement.appendChild(this.htmlElementSelector);
this.loadTileset();
window.addEventListener(
TilorswiftEvent.BACKGROUND_BUTTON_TILE_CLICKED,
(event) => {
if (this.isActive) {
this.setTile(event.button.index);
this.brush.mode = BrushMode.BACKGROUND;
}
}
);
}
loadTileset()
{
if (this.tileset.background === null) {
this.htmlElement.style.backgroundImage = 'none';
return;
}
for (let t = -2; t >= -this.tileset.background.tiles - 1; t--) {
console.log(t);
const button = new ButtonBackgroundTile(this.tileset, t);
this.htmlElementSelector.appendChild(button.getElement());
}
this.htmlElement.style.backgroundImage = 'url("' + this.tileset.background.image.src + '")';
this.htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileWidth() + 'px';
}
/**
* @param {Tileset} tileset
*/
reloadTileset(tileset)
{
this.tileset = tileset;
this.htmlElementSelector.innerHTML = '';
this.htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles)) * this.tileset.getTileWidth() + 'px';
this.loadTileset();
}
createElementPicker()
{
const htmlElement = document.createElement('div');
htmlElement.id = 'tileset-picker';
htmlElement.style.width = this.tileset.getTileWidth() + 'px';
htmlElement.style.height = this.tileset.getTileHeight() + 'px';
htmlElement.style.backgroundSize = this.tileset.getTileWidth() + 'px ' + this.tileset.getTileHeight() + 'px';
return htmlElement;
}
createElementSelector()
{
const htmlElementSelector = document.createElement('div');
htmlElementSelector.id = 'tileset-selector-widget';
htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles)) * this.tileset.getTileWidth() + 'px';
htmlElementSelector.style.left = String(this.tileset.getTileWidth() + 1) + 'px';
return htmlElementSelector;
}
setTile(index)
{
this.htmlElement.style.backgroundPosition = String(-this.tileset.getTileWidth() * index) + 'px ' + String(this.tileset.getTileHeight()) + 'px';
}
getElement()
{
return this.htmlElement;
}
updateExtendedTileVisibility()
{
const firstExtendedTileIndex = this.tileset.tiles - (this.tileset.tiles - this.tileset.primaryTiles);
for (const index of this.htmlElementSelector.childNodes.keys()) {
if (index >= firstExtendedTileIndex) {
this.htmlElementSelector.childNodes.item(index).style.display = this.brush.isIntelligent
? 'none'
: 'inline-flex';
}
}
}
}

4
tilorswift/js/module.js
View File

@ -8,6 +8,10 @@ const imageLoader = new ImageLoader();
for (const graphicSet of GraphicSet) {
imageLoader.addImage('../' + Setting.TILESET_LOCATION + graphicSet.tileset);
if (graphicSet.tilesetBackground !== null) {
imageLoader.addImage('../' + Setting.TILESET_LOCATION + graphicSet.tilesetBackground.path);
}
}
imageLoader.onLoad = () => {

3
tilorswift/style.css
View File

@ -179,6 +179,9 @@ body {
display: inline-flex;
}
.entrance, .target {
width: 96px;
height: 96px;
position: absolute;
background-image: url("graphics/entrance-point.svg") !important;
background-size: contain !important;
background-position: center bottom !important;