-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (85 loc) · 3.75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Principia Lua image converter</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta property="og:title" content="Principia Lua image converter">
<meta name="description" content="Web-based tool for converting an image into Lua code for loading it as a Principia LuaScript sprite.">
<meta property="og:description" content="Web-based tool for converting an image into Lua code for loading it as a Principia LuaScript sprite.">
<meta property="og:site_name" content="Principia">
<meta property="og:type" content="website">
<meta property="og:url" content="https://principia-web.se/image-to-lua/">
</head>
<body>
<a href="/">< Back to principia-web</a>
<h1>Principia Lua image converter</h1>
<p>This tool can help you convert an image into code for loading it as a Principia LuaScript sprite. It converts an image into a table of pixel data that can be loaded into a sprite.
<p>While the example loading implementation is exclusive to Principia's LuaScript API, you can implement your own loading functionality around the pixel data that is outputted for use with anything else featuring Lua scripting.</p>
<p>For more information about Principia Lua scripting see <a href="https://principia-web.se/wiki/LuaScript">LuaScript</a> on the Principia Wiki.</p>
<hr>
<p class="desc">
Select an image to convert:
<input type="file" id="temp_upload">
</p>
<p class="desc">
Include transparency:
<input type="checkbox" id="include_alpha">
</p>
<p class="desc">
Base coordinates:
X: <input type="text" id="base_x" value="0" size="4">,
Y: <input type="text" id="base_y" value="0" size="4">
</p>
<p>(Used to offset the sprite in the Principia canvas, to allow for several sprites within the 512x512 canvas)</p>
<p>
<button onclick="image_to_lua();">Process image</button>
<button onclick="$hide($('results'));">Clear</button>
</p>
<hr>
<div id="loading" class="loading" style="display:none">Loading...</div>
<div id="results" style="display:none">
<h2>Converted image data</h2>
<div class="two-columns">
<div>
<p id="str_len_1">
<strong>Variant 1</strong>
(Uncompressed, <span id="v1_chars">X</span> chars)
</p>
<textarea class="code" id="code_1" readonly></textarea>
<button class="nobtn" onclick="$('code_1').select();">Select code</button>
</div>
<div>
<p id="str_len_2"><strong>Variant 2</strong> (RLE compression, <span id="v2_chars">X</span> chars)</p>
<textarea class="code" id="code_2" readonly></textarea>
<button class="nobtn" onclick="$('code_2').select();">Select code</button>
</div>
</div>
<h2>Initialise and load texels:</h2>
Initialises the sprite area and loads the image data table on level startup.
<div class="two-columns">
<div>
<p><strong>Variant 1</strong></p>
<textarea class="code" id="init_code_1" readonly></textarea>
<button onclick="$('init_code_1').select();">Select code</button>
</div>
<div>
<p><strong>Variant 2</strong></p>
<textarea class="code" id="init_code_2" readonly></textarea>
<button onclick="$('init_code_2').select();">Select code</button>
</div>
</div>
<h2>Draw image:</h2>
<p>Example code to draw the image as a sprite. See <a href="https://principia-web.se/wiki/LuaScript/this#this-draw-sprite">this:draw_sprite()</a> on the Principia Wiki for more information about the function arguments.</p>
<textarea class="code wide" id="draw_image" readonly></textarea>
<p>Image dimensions: <span id="img_res">?</span></p>
<img id="temp_img">
</div>
<br>
<div id="debug" style="display:none">
<h3>Debug</h3>
<canvas id="temp_canvas"></canvas>
</div>
<script type="text/javascript" src="image-to-lua.js"></script>
</body>
</html>