|
1 <!doctype html> |
|
2 <html> |
|
3 <head> |
|
4 <title>Hedgewars Theme Editor</title> |
|
5 <script type="text/javascript"> |
|
6 var sky, clouds, horizont, water, land, border; |
|
7 var skyColor, waterTopColor, waterBottomColor; |
|
8 var elements = 7; |
|
9 var landArray; |
|
10 |
|
11 function landFunction(x){ |
|
12 return 384 - 192 * Math.sin(x * Math.PI/512); |
|
13 } |
|
14 |
|
15 function tryToDraw(){ |
|
16 if (--elements <= 0) { |
|
17 draw(); |
|
18 } |
|
19 } |
|
20 |
|
21 function load(){ |
|
22 var canvas = document.getElementById('preview'); |
|
23 if (canvas.getContext){ |
|
24 var ctx = canvas.getContext('2d'); |
|
25 |
|
26 ctx.fillStyle = '#0b294b'; |
|
27 ctx.fillRect(0, 0, 512, 384); |
|
28 |
|
29 ctx.font = "40pt Arial"; |
|
30 ctx.fillStyle = '#2b7bd5'; |
|
31 ctx.fillText('Loading Images...', 32, 212); |
|
32 } |
|
33 |
|
34 sky = new Image(); |
|
35 sky.onload = tryToDraw; |
|
36 sky.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Sky.png'; |
|
37 |
|
38 clouds = new Image(); |
|
39 clouds.onload = tryToDraw; |
|
40 clouds.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/Clouds.png'; |
|
41 |
|
42 horizont = new Image(); |
|
43 horizont.onload = tryToDraw; |
|
44 horizont.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/horizont.png'; |
|
45 |
|
46 land = new Image(); |
|
47 land.onload = tryToDraw; |
|
48 land.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/LandTex.png'; |
|
49 |
|
50 border = new Image(); |
|
51 border.onload = tryToDraw; |
|
52 border.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Border.png'; |
|
53 |
|
54 water = new Image(); |
|
55 water.onload = tryToDraw; |
|
56 water.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/BlueWater.png'; |
|
57 |
|
58 landArray = new Array(512); |
|
59 for (var x = 0; x < landArray.length; x++) |
|
60 landArray[x] = landFunction(x); |
|
61 |
|
62 skyColor = '#131252'; |
|
63 document.getElementById('skyColor').value = skyColor; |
|
64 |
|
65 waterTopColor = '#555C9D'; |
|
66 document.getElementById('waterTopColor').value = waterTopColor; |
|
67 |
|
68 waterBottomColor = '#343C7D'; |
|
69 document.getElementById('waterBottomColor').value = waterBottomColor; |
|
70 |
|
71 tryToDraw(); |
|
72 } |
|
73 |
|
74 function draw(){ |
|
75 var canvas = document.getElementById('preview'); |
|
76 if (canvas.getContext){ |
|
77 var ctx = canvas.getContext('2d'); |
|
78 |
|
79 ctx.fillStyle = skyColor; |
|
80 ctx.fillRect(0, 0, 512, 384); |
|
81 |
|
82 ctx.drawImage(sky, 0, 64, 512, 256); |
|
83 |
|
84 for (var i = 0; i < 4; i++) |
|
85 ctx.drawImage(clouds, 0, i * 128, 256, 128, i * 128, 64, 128, 64); |
|
86 |
|
87 ctx.drawImage(horizont, 0, 192, 512, 128); |
|
88 |
|
89 ctx.save(); |
|
90 |
|
91 ctx.beginPath(); |
|
92 ctx.moveTo(0, 384); |
|
93 for (var x = 0; x < landArray.length; x++) |
|
94 ctx.lineTo(x, landArray[x]); |
|
95 ctx.clip(); |
|
96 |
|
97 for (var i = 0; i < 2; i++) |
|
98 for (var k = 0; k < 2; k++) |
|
99 ctx.drawImage(land, i * 320, k * 240, 320, 240); |
|
100 |
|
101 ctx.restore(); |
|
102 |
|
103 var k = 0; |
|
104 for (var x = 0; x < landArray.length; x++) { |
|
105 if (++k == 64) |
|
106 k = 0; |
|
107 ctx.drawImage(border, k, 0, 2, 16, x, landArray[x] - 4, 1, 8); |
|
108 } |
|
109 |
|
110 |
|
111 var gradient = ctx.createLinearGradient(0, 320, 0, 384); |
|
112 gradient.addColorStop(0, waterTopColor); |
|
113 gradient.addColorStop(1, waterBottomColor); |
|
114 ctx.fillStyle = gradient; |
|
115 ctx.fillRect(0, 320, 512, 384); |
|
116 |
|
117 for (var i = 0; i < 8; i++) |
|
118 ctx.drawImage(water, i * 64, 308, 64, 24); |
|
119 } |
|
120 } |
|
121 </script> |
|
122 <style type="text/css"> |
|
123 canvas { border: 1px solid black; } |
|
124 </style> |
|
125 </head> |
|
126 <body onload="load();"> |
|
127 <h1>Hedgewars Theme editor</h1> |
|
128 <canvas id="preview" width="512" height="384"></canvas><br> |
|
129 <table> |
|
130 <tr><td>Sky:</td><td> |
|
131 <input id="sky" type="file" accept="image/png" onchange="sky.src = window.URL.createObjectURL(this.files[0])"></input> |
|
132 </td></tr> |
|
133 <tr><td>Sky Color:</td><td> |
|
134 <input id="skyColor" type="color" onchange="skyColor = this.value; draw()"></input> |
|
135 </td></tr> |
|
136 <tr><td>Clouds:</td><td> |
|
137 <input id="clouds" type="file" accept="image/png" onchange="clouds.src = window.URL.createObjectURL(this.files[0])"></input> |
|
138 </td></tr> |
|
139 <tr><td>Horizont:</td><td> |
|
140 <input id="horizont" type="file" accept="image/png" onchange="horizont.src = window.URL.createObjectURL(this.files[0])"></input> |
|
141 </td></tr> |
|
142 <tr><td>Land:</td><td> |
|
143 <input id="land" type="file" accept="image/png" onchange="land.src = window.URL.createObjectURL(this.files[0])"></input> |
|
144 </td></tr> |
|
145 <tr><td>Border:</td><td> |
|
146 <input id="border" type="file" accept="image/png" onchange="border.src = window.URL.createObjectURL(this.files[0])"></input> |
|
147 </td></tr> |
|
148 <tr><td>Water:</td><td> |
|
149 <input id="water" type="file" accept="image/png" onchange="water.src = window.URL.createObjectURL(this.files[0])"></input> |
|
150 </td></tr> |
|
151 <tr><td>Water Top Color:</td><td> |
|
152 <input id="waterTopColor" type="color" onchange="waterTopColor = this.value; draw()"></input> |
|
153 </td></tr> |
|
154 <tr><td>Water Bottom Color:</td><td> |
|
155 <input id="waterBottomColor" type="color" onchange="waterBottomColor = this.value; draw()"></input> |
|
156 </td></tr> |
|
157 </table> |
|
158 </body> |
|
159 </html> |