forked from ppfun/pixelplanet
update readme and ocean tile loading scripts
This commit is contained in:
parent
009f6f78f3
commit
f7599569a4
|
@ -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
|
||||
```
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue
Block a user