├── .gitattributes
├── .gitignore
├── README.md
├── css
├── Fontix-Regular.ttf
└── style.css
├── index.html
└── media
├── assets
└── tilix grid.psd
├── photoshop
├── axes.psd
├── block.psd
├── cell divisions.psd
├── cell size.psd
├── clusters.psd
├── corners.psd
├── cube.psd
├── dont mirror.psd
├── dual pixels.psd
├── grid pattern.psd
├── grid.psd
├── iso lines dos donts.psd
├── module examples.psd
├── right pixels.psd
├── sides.psd
├── tilix logo.psd
├── tilted cube faces.psd
├── vertical lines dos donts.psd
└── vertical lines.psd
└── web
├── axes.png
├── block.png
├── cell-divisions.png
├── cell-size.gif
├── clusters.gif
├── corners.png
├── cube.gif
├── dont-mirror.gif
├── dual-pixels.gif
├── grid-pattern.png
├── grid.gif
├── iso-lines-dos-donts.gif
├── module-examples.gif
├── right-pixels.gif
├── sides.png
├── tilix-logo.png
├── tilted-cube-faces.gif
├── vertical-lines-dos-donts.png
└── vertical-lines.gif
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 |
2 | .DS_Store
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # tilix-reference
2 |
3 | Check it out! https://c6y.github.io/tilix-reference/
4 |
--------------------------------------------------------------------------------
/css/Fontix-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/css/Fontix-Regular.ttf
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: Fontix;
3 | src: url(Fontix-Regular.ttf);
4 | }
5 |
6 | body {
7 | background-color: #009edb;
8 | background-image: url("../media/web/grid-pattern.png");
9 | background-repeat: repeat;
10 | image-rendering: pixelated;
11 | padding: 0;
12 | margin: 0;
13 | background-size: 48px 24px;
14 | font-family: Fontix, sans-serif;
15 | font-size: 16px;
16 | line-height: 16px;
17 | }
18 |
19 | #container {
20 | padding: 25px;
21 | display: flex;
22 | flex-direction: row;
23 | flex-wrap: wrap;
24 | }
25 |
26 | .logo {
27 | margin: 11px 11px 11px -13px;
28 | }
29 |
30 | .textbox,
31 | figure {
32 | margin: 11px;
33 | box-shadow: 2px 2px;
34 | border-width: 2px;
35 | border-color: black;
36 | box-sizing: border-box;
37 | display: inline-table;
38 | }
39 |
40 | .textbox {
41 | background-color: #00b9f2;
42 | border-style: solid;
43 | padding: 4px 6px;
44 | }
45 |
46 | .w10 {
47 | width: 242px;
48 | }
49 |
50 | .w8 {
51 | width: 194px;
52 | }
53 |
54 | .w6 {
55 | width: 146px;
56 | }
57 |
58 | figure {
59 | border-style: solid solid none solid;
60 | padding: 0;
61 | height: fit-content;
62 | }
63 |
64 | img {
65 | zoom: 2;
66 | display: table-row;
67 | }
68 |
69 | figcaption {
70 | padding: 4px 6px;
71 | display: table-caption;
72 | box-sizing: border-box;
73 | background-color: #00b9f2;
74 | caption-side: bottom;
75 | border-style: none solid solid solid;
76 | border-width: 2px;
77 | box-shadow: 2px 2px;
78 | color: black;
79 | }
80 |
81 | a {
82 | text-decoration: none;
83 | color: #2F3EA8;
84 | }
85 |
86 | strong {
87 | color: white;
88 | font-weight: normal;
89 | }
90 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | eBoy TiliX Home
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | TiliX is a modular system for isometric pixel blocks developed by eBoy. It hopes to make it easier to work with pixel modules in a collaborative environment, and to establish a base for generative approaches.
17 |
18 |
19 | Grid dimensions have been carefully chosen, and allow for flexible divisions. Additionally, the concepts of 'Dual Pixels' and 'Right Pixels' are introduced. These are aimed to avoid clusters of lines.
20 |
21 |
22 |
23 | Axes Objects with larger xy-values are placed in front.
24 |
25 |
26 |
27 | Sides Upper right side is 1, then goes clock-wise.
28 |
29 |
30 |
31 | Corners Top corner is A, then goes clock-wise.
32 |
33 |
34 |
35 | Cell 7×7 Dual Px
36 |
37 |
38 |
39 | The Grid is a good starting point: TiliX assets ↗
40 |
41 |
42 |
43 | Block = 4×4 cells
44 |
45 |
46 |
47 | Cell Divisions Divide by 2, 3, 6
48 |
49 |
50 |
51 | Clusters TiliX is about trying to avoid clusters of lines.
52 |
53 |
54 |
55 | Draw Iso Lines on the grid pixels to avoid clusters.
56 |
57 |
58 |
59 | Dual Pixels sit at the heart of the isometric grid. They encapsulate the 2/1 proportion inherent to isometric pixel art.
60 |
61 |
62 |
63 | Right Pixels are the single pixel on the right side of dual pixels. They serve as anchors for positioning, and for drawing lines.
64 |
65 |
66 |
67 | Vertical Lines should sit on Right Pixels only.
68 |
69 |
70 |
71 | Do not mirror objects as vertical lines would end up on left pixels.
72 |
73 |
74 |
75 | Be consistent, and avoid the left pixels for Vertical Lines , or you'll have to deal with ugly cluster lines.
76 |
77 |
78 |
79 | Cube Size is 4×4×4 Cells — but it's easy to divide — which makes the size very flexible.
80 |
81 |
82 |
83 | Tilted cube faces in 1/4 steps.
84 |
85 |
86 |
87 | Module examples
88 |
89 |
90 | Copyright eBoy
91 | Contact:
eboy@eboy.com
92 | Twitter:
@eboyarts
93 | Instagram:
@eboyarts
94 |
95 |
96 |
97 |
98 |
--------------------------------------------------------------------------------
/media/assets/tilix grid.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/assets/tilix grid.psd
--------------------------------------------------------------------------------
/media/photoshop/axes.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/axes.psd
--------------------------------------------------------------------------------
/media/photoshop/block.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/block.psd
--------------------------------------------------------------------------------
/media/photoshop/cell divisions.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/cell divisions.psd
--------------------------------------------------------------------------------
/media/photoshop/cell size.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/cell size.psd
--------------------------------------------------------------------------------
/media/photoshop/clusters.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/clusters.psd
--------------------------------------------------------------------------------
/media/photoshop/corners.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/corners.psd
--------------------------------------------------------------------------------
/media/photoshop/cube.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/cube.psd
--------------------------------------------------------------------------------
/media/photoshop/dont mirror.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/dont mirror.psd
--------------------------------------------------------------------------------
/media/photoshop/dual pixels.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/dual pixels.psd
--------------------------------------------------------------------------------
/media/photoshop/grid pattern.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/grid pattern.psd
--------------------------------------------------------------------------------
/media/photoshop/grid.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/grid.psd
--------------------------------------------------------------------------------
/media/photoshop/iso lines dos donts.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/iso lines dos donts.psd
--------------------------------------------------------------------------------
/media/photoshop/module examples.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/module examples.psd
--------------------------------------------------------------------------------
/media/photoshop/right pixels.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/right pixels.psd
--------------------------------------------------------------------------------
/media/photoshop/sides.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/sides.psd
--------------------------------------------------------------------------------
/media/photoshop/tilix logo.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/tilix logo.psd
--------------------------------------------------------------------------------
/media/photoshop/tilted cube faces.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/tilted cube faces.psd
--------------------------------------------------------------------------------
/media/photoshop/vertical lines dos donts.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/vertical lines dos donts.psd
--------------------------------------------------------------------------------
/media/photoshop/vertical lines.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/photoshop/vertical lines.psd
--------------------------------------------------------------------------------
/media/web/axes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/axes.png
--------------------------------------------------------------------------------
/media/web/block.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/block.png
--------------------------------------------------------------------------------
/media/web/cell-divisions.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/cell-divisions.png
--------------------------------------------------------------------------------
/media/web/cell-size.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/cell-size.gif
--------------------------------------------------------------------------------
/media/web/clusters.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/clusters.gif
--------------------------------------------------------------------------------
/media/web/corners.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/corners.png
--------------------------------------------------------------------------------
/media/web/cube.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/cube.gif
--------------------------------------------------------------------------------
/media/web/dont-mirror.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/dont-mirror.gif
--------------------------------------------------------------------------------
/media/web/dual-pixels.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/dual-pixels.gif
--------------------------------------------------------------------------------
/media/web/grid-pattern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/grid-pattern.png
--------------------------------------------------------------------------------
/media/web/grid.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/grid.gif
--------------------------------------------------------------------------------
/media/web/iso-lines-dos-donts.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/iso-lines-dos-donts.gif
--------------------------------------------------------------------------------
/media/web/module-examples.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/module-examples.gif
--------------------------------------------------------------------------------
/media/web/right-pixels.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/right-pixels.gif
--------------------------------------------------------------------------------
/media/web/sides.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/sides.png
--------------------------------------------------------------------------------
/media/web/tilix-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/tilix-logo.png
--------------------------------------------------------------------------------
/media/web/tilted-cube-faces.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/tilted-cube-faces.gif
--------------------------------------------------------------------------------
/media/web/vertical-lines-dos-donts.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/vertical-lines-dos-donts.png
--------------------------------------------------------------------------------
/media/web/vertical-lines.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/c6y/tilix-reference/15d8c5f0cde1e3c4543341d2ca3366672faac923/media/web/vertical-lines.gif
--------------------------------------------------------------------------------