From f7599569a49007d8e70127cc67aed70e4d34a6c4 Mon Sep 17 00:00:00 2001 From: HF Date: Thu, 2 Jan 2020 19:05:21 +0100 Subject: [PATCH] update readme and ocean tile loading scripts --- utils/ocean-tiles/README.md | 23 ++++++++++++++++++++++- utils/ocean-tiles/drawOcean.js | 7 +++++-- 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/utils/ocean-tiles/README.md b/utils/ocean-tiles/README.md index c01235f..76a206f 100644 --- a/utils/ocean-tiles/README.md +++ b/utils/ocean-tiles/README.md @@ -1,20 +1,41 @@ # ocean tiles -In order to have the ocean and land on the canvas, or any other background pic, we have to create tiles that we can later upload to the canvas with redisBackground.js. +In order to have the ocean and land on the canvas, or any other background pic, we have to create tiles that we can later upload to the canvas with drawOcean.js. Those are the commands to create tiles in subfolders: - create folder for tiles: + +``` mkdir ./ocean cd ocean +``` - to split image into tiles: + +``` convert ../ocean.png -crop 128x128 +adjoin ocean_tiles%02d.png +``` - upscale and convert to black and white + +``` mogrify -resize 2048x2048 -colors 2 -white-threshold 80% -black-threshold 80% ocean_tiles*.png +``` or without dithering: + +``` mogrify +dither -resize 2048x2048 -colors 2 -white-threshold 80% -black-threshold 80% ocean_tiles*.png +``` - create subfolders + +``` for i in {0..31}; do mkdir $i; done +``` - put into subfolders + +``` for file in ./ocean_tiles*.png; do NUM=`echo $file | sed -e 's/.*ocean_tiles//' -e 's/.png//'`; Y=$(expr $NUM / 32); X=$(expr $NUM % 32); newfile="$X/$Y.png"; mv $file $newfile; done +``` - to remove the subfolders again + +``` for i in {0..31}; do rm -r $i; done +``` diff --git a/utils/ocean-tiles/drawOcean.js b/utils/ocean-tiles/drawOcean.js index 1b7c207..be248bf 100644 --- a/utils/ocean-tiles/drawOcean.js +++ b/utils/ocean-tiles/drawOcean.js @@ -8,11 +8,14 @@ */ -import { CANVAS_SIZE, CANVAS_MIN_XY, CANVAS_MAX_XY } from '../../src/core/constants'; import { imagemask2Canvas } from '../../src/core/Image'; import sharp from 'sharp'; import fs from 'fs'; +const CANVAS_SIZE = 256 * 256; +const CANVAS_MIN_XY = -(CANVAS_SIZE / 2); +const CANVAS_MAX_XY = (CANVAS_SIZE / 2) - 1; + const TILEFOLDER = './ocean'; const TILE_SIZE = 2048; @@ -25,7 +28,7 @@ async function applyMasks() { console.log(`Checking tile ${filename}`); if (!fs.existsSync(filename)) continue; let tile = await sharp(filename).removeAlpha().raw().toBuffer(); - await imagemask2Canvas(x, y, tile, TILE_SIZE, TILE_SIZE, (clr) => { + await imagemask2Canvas(0, x, y, tile, TILE_SIZE, TILE_SIZE, (clr) => { return 1; //set color to index 1 -> land }); tile = null;