update readme and ocean tile loading scripts
This commit is contained in:
parent
009f6f78f3
commit
f7599569a4
|
@ -1,20 +1,41 @@
|
||||||
# ocean tiles
|
# 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:
|
Those are the commands to create tiles in subfolders:
|
||||||
|
|
||||||
- create folder for tiles:
|
- create folder for tiles:
|
||||||
|
|
||||||
|
```
|
||||||
mkdir ./ocean
|
mkdir ./ocean
|
||||||
cd ocean
|
cd ocean
|
||||||
|
```
|
||||||
- to split image into tiles:
|
- to split image into tiles:
|
||||||
|
|
||||||
|
```
|
||||||
convert ../ocean.png -crop 128x128 +adjoin ocean_tiles%02d.png
|
convert ../ocean.png -crop 128x128 +adjoin ocean_tiles%02d.png
|
||||||
|
```
|
||||||
- upscale and convert to black and white
|
- upscale and convert to black and white
|
||||||
|
|
||||||
|
```
|
||||||
mogrify -resize 2048x2048 -colors 2 -white-threshold 80% -black-threshold 80% ocean_tiles*.png
|
mogrify -resize 2048x2048 -colors 2 -white-threshold 80% -black-threshold 80% ocean_tiles*.png
|
||||||
|
```
|
||||||
or without dithering:
|
or without dithering:
|
||||||
|
|
||||||
|
```
|
||||||
mogrify +dither -resize 2048x2048 -colors 2 -white-threshold 80% -black-threshold 80% ocean_tiles*.png
|
mogrify +dither -resize 2048x2048 -colors 2 -white-threshold 80% -black-threshold 80% ocean_tiles*.png
|
||||||
|
```
|
||||||
- create subfolders
|
- create subfolders
|
||||||
|
|
||||||
|
```
|
||||||
for i in {0..31}; do mkdir $i; done
|
for i in {0..31}; do mkdir $i; done
|
||||||
|
```
|
||||||
- put into subfolders
|
- 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
|
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
|
- to remove the subfolders again
|
||||||
|
|
||||||
|
```
|
||||||
for i in {0..31}; do rm -r $i; done
|
for i in {0..31}; do rm -r $i; done
|
||||||
|
```
|
||||||
|
|
|
@ -8,11 +8,14 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import { CANVAS_SIZE, CANVAS_MIN_XY, CANVAS_MAX_XY } from '../../src/core/constants';
|
|
||||||
import { imagemask2Canvas } from '../../src/core/Image';
|
import { imagemask2Canvas } from '../../src/core/Image';
|
||||||
import sharp from 'sharp';
|
import sharp from 'sharp';
|
||||||
import fs from 'fs';
|
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 TILEFOLDER = './ocean';
|
||||||
const TILE_SIZE = 2048;
|
const TILE_SIZE = 2048;
|
||||||
|
|
||||||
|
@ -25,7 +28,7 @@ async function applyMasks() {
|
||||||
console.log(`Checking tile ${filename}`);
|
console.log(`Checking tile ${filename}`);
|
||||||
if (!fs.existsSync(filename)) continue;
|
if (!fs.existsSync(filename)) continue;
|
||||||
let tile = await sharp(filename).removeAlpha().raw().toBuffer();
|
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
|
return 1; //set color to index 1 -> land
|
||||||
});
|
});
|
||||||
tile = null;
|
tile = null;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user