spielemarmelade/turtlegame
4
0
Fork 0
Code Issues Pull requests Releases 1 Activity Actions

Overworld Assets #2

Merged
msrd0 merged 5 commits from assets into main 2024-07-06 11:52:10 +00:00
Conversation 0 Commits 5 Files changed 29 +299
29 changed files with 299 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
assets/overworld/README.md Normal file
View file

@ -0,0 +1,9 @@
# Powercreep - Overworld Assets
These assets were designed by us.
## Design
- All assets (with few exceptions for those that are meant to be included in other assets) have a `viewBox` of `0,0 64,64`.
- We strech all assets to `512,512` so they can be displayed easily in a browser without having to zoom much.
- We use asset composition whenever possible, however note that images don't recursively include other images (at least when viewed in firefox), so whenever an assets that is meant to be included needs another asset, that other asset needs to be included first.

7
assets/overworld/grass.svg Normal file
View file

@ -0,0 +1,7 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="none">
<!-- fill the entire image green -->
<rect x="0" y="0" width="64" height="64" fill="forestgreen"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 227 B

19
assets/overworld/house-bottom-door.svg Normal file
View file

@ -0,0 +1,19 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<image x="0" y="0" width="64" height="64" href="house-bottom.svg"/>
<!-- path to the door -->
<path d="M8,64 v-8 h48 v8 z" stroke="none" fill="sandybrown"/>
<path d="M8,64 v-8 h48 v8"/>
<!-- the door -->
<path d="M24,48 v-32 h16 v32 z" fill="white"/>
<circle cx="27" cy="32" r="1" stroke="none" fill="black"/>
<!-- the steps -->
<path d="M16,48 H48 V56 H16 z" fill="#aaa"/>
<path d="M20,48 H44 V52 H20 z" fill="#888"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 649 B

9
assets/overworld/house-bottom-left.svg Normal file
View file

@ -0,0 +1,9 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<image x="0" y="0" width="64" height="64" href="house-bottom-right.svg"
transform="translate(32,0) scale(-1,1) translate(-32,0)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 352 B

12
assets/overworld/house-bottom-right.svg Normal file
View file

@ -0,0 +1,12 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<!-- fill the inner part of the house -->
<path d="M0,56 H48 V0 H0 z" stroke="none" fill="darkred"/>
<!-- border -->
<path d="M0,56 H48 V0"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 365 B

8
assets/overworld/house-bottom-window.svg Normal file
View file

@ -0,0 +1,8 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<image x="0" y="0" width="64" height="64" href="house-bottom.svg"/>
<image x="16" y="8" width="32" height="32" href="window.svg"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 350 B

12
assets/overworld/house-bottom.svg Normal file
View file

@ -0,0 +1,12 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<!-- fill the inner part of the house -->
<path d="M0,56 H64 V0 H0 z" stroke="none" fill="darkred"/>
<!-- border -->
<path d="M0,56 H64"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 362 B

0
assets/overworld/house-example.svg Normal file
View file

9
assets/overworld/house-mid-left.svg Normal file
View file

@ -0,0 +1,9 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<image x="0" y="0" width="64" height="64" href="house-mid-right.svg"
transform="translate(32,0) scale(-1,1) translate(-32,0)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 349 B

12
assets/overworld/house-mid-right.svg Normal file
View file

@ -0,0 +1,12 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<!-- fill the inner part of the house -->
<path d="M0,64 H48 V0 H0 z" stroke="none" fill="darkred"/>
<!-- border -->
<path d="M48,64 V0"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 362 B

6
assets/overworld/house-mid-window.svg Normal file
View file

@ -0,0 +1,6 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<image x="0" y="0" width="64" height="64" href="house-mid.svg"/>
<image x="16" y="8" width="32" height="32" href="window.svg"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 239 B

5
assets/overworld/house-mid.svg Normal file
View file

@ -0,0 +1,5 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="64" height="64" stroke="none" fill="darkred"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 182 B

9
assets/overworld/house-roof-left.svg Normal file
View file

@ -0,0 +1,9 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<image x="0" y="0" width="64" height="64" href="house-roof-right.svg"
transform="translate(32,0) scale(-1,1) translate(-32,0)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 350 B

9
assets/overworld/house-roof-mid-left.svg Normal file
View file

@ -0,0 +1,9 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<image x="0" y="0" width="64" height="64" href="house-roof-mid-right.svg"
transform="translate(32,0) scale(-1,1) translate(-32,0)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 354 B

12
assets/overworld/house-roof-mid-right.svg Normal file
View file

@ -0,0 +1,12 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<!-- fill the inner part of the house -->
<path d="M0,0 L64,64 H0 z" stroke="none" fill="darkred"/>
<!-- roof -->
<path d="M0,0 L64,64"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 361 B

16
assets/overworld/house-roof-right.svg Normal file
View file

@ -0,0 +1,16 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<!-- fill the inner part of the house -->
<path d="M0,0 L48,48 V64 H0 z" stroke="none" fill="darkred"/>
<!-- roof path -->
<path d="M56,56 L0,0"/>
<!-- wall path -->
<path d="M48,64 V48"/>
<!-- roof support -->
<path d="M48,48 l5,5 l-5,2.5 z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 485 B

12
assets/overworld/house-roof-top.svg Normal file
View file

@ -0,0 +1,12 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<!-- fill the inner part of the house -->
<path d="M0,64 L32,32 L64,64 z" stroke="none" fill="darkred"/>
<!-- roof -->
<path d="M0,64 L32,32 L64,64"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 374 B

9
assets/overworld/path-bottom-left-right.svg Normal file
View file

@ -0,0 +1,9 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<image x="0" y="0" width="64" height="64" href="path-top-left-right.svg"
transform="translate(0,32) scale(1,-1) translate(0,-32)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 353 B

9
assets/overworld/path-bottom-left.svg Normal file
View file

@ -0,0 +1,9 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<image x="0" y="0" width="64" height="64" href="path-top-right.svg"
transform="translate(32,32) rotate(90) scale(1,-1) translate(-32,-32)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 362 B

9
assets/overworld/path-bottom-right.svg Normal file
View file

@ -0,0 +1,9 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<image x="0" y="0" width="64" height="64" href="path-top-right.svg"
transform="translate(32,32) rotate(90) translate(-32,-32)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 350 B

18
assets/overworld/path-crossing.svg Normal file
View file

@ -0,0 +1,18 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<!-- fill the inner part of the path sandy'ish -->
<path d="M0,8 h8 v-8 h48 v8 h8 v48 h-8 v8 H8 v-8 H0 z" stroke="none" fill="sandybrown"/>
<!-- left/top border -->
<path d="M0,8 h8 v-8"/>
<!-- right/top border -->
<path d="M56,0 v8 h8"/>
<!-- left/bottom corner -->
<path d="M0,56 h8 v8"/>
<!-- right/bottom corner -->
<path d="M56,64 v-8 h8"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 575 B

9
assets/overworld/path-horiz.svg Normal file
View file

@ -0,0 +1,9 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<image x="0" y="0" width="64" height="64" href="path-vert.svg"
transform="translate(32,32) rotate(90) translate(-32,-32)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 345 B

9
assets/overworld/path-top-left-bottom.svg Normal file
View file

@ -0,0 +1,9 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<image x="0" y="0" width="64" height="64" href="path-top-left-right.svg"
transform="translate(32,32) rotate(-90) translate(-32,-32)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 356 B

16
assets/overworld/path-top-left-right.svg Normal file
View file

@ -0,0 +1,16 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<!-- fill the inner part of the path sandy'ish -->
<path d="M0,8 h8 v-8 h48 v8 h8 v48 H0 z" stroke="none" fill="sandybrown"/>
<!-- left border -->
<path d="M0,8 h8 v-8"/>
<!-- right border -->
<path d="M56,0 v8 h8"/>
<!-- bottom corner -->
<path d="M0,56 h64"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 489 B

9
assets/overworld/path-top-left.svg Normal file
View file

@ -0,0 +1,9 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<image x="0" y="0" width="64" height="64" href="path-top-right.svg"
transform="translate(32,0) scale(-1,1) translate(-32,0)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 348 B

9
assets/overworld/path-top-right-bottom.svg Normal file
View file

@ -0,0 +1,9 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<image x="0" y="0" width="64" height="64" href="path-top-left-right.svg"
transform="translate(32,32) rotate(90) translate(-32,-32)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 355 B

14
assets/overworld/path-top-right.svg Normal file
View file

@ -0,0 +1,14 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<!-- fill the inner part of the path sandy'ish -->
<path d="M8,0 v56 h56 V8 h-8 V0 z" stroke="none" fill="sandybrown"/>
<!-- left/bottom border -->
<path d="M8,0 v56 h56"/>
<!-- right border -->
<path d="M56,0 v8 h8"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 444 B

14
assets/overworld/path-vert.svg Normal file
View file

@ -0,0 +1,14 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<image x="0" y="0" width="64" height="64" href="grass.svg"/>
<!-- fill the inner part of the path sandy'ish -->
<rect x="8" y="0" width="48" height="64" stroke="none" fill="sandybrown"/>
<!-- left border -->
<path d="M8,0 V64"/>
<!-- right border -->
<path d="M56,0 V64"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 437 B

8
assets/overworld/window.svg Normal file
View file

@ -0,0 +1,8 @@
<svg version="1.1" width="512" height="512" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"
stroke="black" stroke-width="1" fill="none">
<rect x="0.5" y="0.5" width="31" height="31" fill="white"/>
<path d="M0,16 H32 M16,0 V32"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 250 B