Skip to content

Commit d1b4ce3

Browse files
NetroScriptNetroScript
committed
First commit
0 parents  commit d1b4ce3

File tree

12 files changed

+1098
-0
lines changed

12 files changed

+1098
-0
lines changed

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 NetroScript
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
Input-Button-Sprite-Generator
2+
=============================
3+
4+
Introduction
5+
------------
6+
7+
When playing games it is always nice to be able to remap their key input, especially if you are not using QWERTZ.
8+
So developers often give the player the ability to rebind their controls. Often you then have a more or less text window (look f.e. at the source engine remapping) which tells you jump is bound to "space".
9+
But imagine you have a tutorial, where you tell the player which key presses lead to what, but they already rebound it, so you get f.e. your input map and tell them "To jump press 'Left Mouse Click'". But in my opinion a visual representation is much nicer than just the text. So for a project I worked on I would have liked to additionally (or only) show images of the input, instead of writing their text form. But to do that you would need those images, and there are some free sprites available for the keyboard and even more which you have to pay for, but still they maybe don't have all keys the players might want to try out. So for the case the player would like to bind something to Ä you probably won't have an image for it. But creating every sprite is a big pain.
10+
So I searched for generators which can do the job, where you provide the base structure, but I didn't find anything, so I wrote my own one.
11+
12+
Screenshots
13+
------------------
14+
15+
The following examples are the base settings.
16+
17+
![Generated keyboardkeys](https://i.imgur.com/eQs5HW9.png)
18+
19+
![Generated mouse previews](https://i.imgur.com/cXLcJHT.png)
20+
21+
![Generated mouse previews in Windows Explorer](https://i.imgur.com/cfTQ59L.png)
22+
23+
![The Interface](https://i.imgur.com/luhP1KZ.png)
24+
25+
How it works
26+
------------
27+
28+
You have a web form, where you can fill in a base HTML structure and your own CSS (of course examples are also already given), and the script then iterates through a list of characters and generates an image for every possible character by putting it into your base structure and then taking a "screenshot" using [html2canvas](https://github.com/niklasvh/html2canvas) and so you have less work, [JSZip](https://stuk.github.io/jszip/) is used to put it into a neat zip file, which you just have to downoad.
29+
You may ask what about the files names and what if I only want certain characters in my set? Or more than there are provided?
30+
Well currently the keyboard scancodes from [Godot])(https://godotengine.org/) are used, so I think every possible input should be in there. But you can customize what you want. For the keyboard you have a JSON object where all keys are the file names which will be generated, and the values will be the HTML which will be put into your base structure. Neat stuff like Material Icons as characters is already included.
31+
32+
But the sprites aren't limited to the keyboard!
33+
A mouse is already included too, in the same fashion as the keyboard, only change is that the values in the JSON are not the content now, but the classes which will be added to the container.
34+
35+
Feel free to tryout as much as you want.
36+
37+
Usage
38+
-----
39+
40+
Just download this as a folder, and open index.html in your browser.
41+
If you want to use images in the CSS, you have to host a server, otherwise the browser won't allow to export the images.
42+
43+
Further example styles
44+
-----------------------
45+
46+
Keyboard:
47+
48+
* White and more minimalistic
49+
50+
CSS:
51+
52+
```CSS
53+
.letter {
54+
font-size: 10px;
55+
padding: 0px 3px;
56+
text-shadow: gray 0px 1px;
57+
white-space: pre;
58+
color: black;
59+
}
60+
61+
.keycontainer {
62+
background-color: #FFFFFF;
63+
padding: 5px;
64+
min-height: 10px;
65+
text-align: center;
66+
min-width: 10px;
67+
border-radius: 5px;
68+
}
69+
70+
/*Something like box shadow is not supported, so we create 2 "shadows" by having it nested in wrapers*/
71+
.wrapper1 {
72+
background-color: #EEEEEE;
73+
border-radius: 4px;
74+
padding: 1px 3px 5px 2px;
75+
}
76+
```
77+
78+
* Using images in the CSS
79+
80+
CSS:
81+
82+
```CSS
83+
.letter {
84+
font-size: 20px;
85+
padding: 0px 3px;
86+
text-shadow: #333333 0px 1px;
87+
white-space: pre;
88+
color: gray;
89+
}
90+
91+
/*Because you access local files here, when not run on a WebServer, this needs to be run on a server, otherwise the canvas can't be converted to a DataURL*/
92+
.keycontainer {
93+
background: linear-gradient(black, #474747);
94+
padding: 5px;
95+
min-height: 40px;
96+
text-align: center;
97+
min-width: 23px;
98+
background-image: url("img/keycap_middle.png");
99+
background-repeat: repeat-x;
100+
display:inline-block;
101+
}
102+
103+
.leftimg{
104+
background-image: url(img/keycap_left.png);
105+
width: 12px;
106+
height: 50px;
107+
display:inline-block;
108+
}
109+
110+
.rightimg{
111+
background-image: url(img/keycap_right.png);
112+
width: 11px;
113+
height: 50px;
114+
display:inline-block;
115+
}
116+
117+
.con {
118+
display:flex;
119+
}
120+
```
121+
122+
HTML:
123+
124+
```HTML
125+
<div class="con">
126+
<div class="leftimg"></div>
127+
<div class="keycontainer">
128+
<div class="letter">A</div>
129+
</div>
130+
<div class="rightimg"></div>
131+
</div>
132+
```
133+
134+
Mouse:
135+
136+
* 30x30 Pixel mouse icons:
137+
138+
CSS:
139+
140+
```CSS
141+
.hor {
142+
display: flex;
143+
flex: 1;
144+
}
145+
146+
.vert {
147+
display: flex;
148+
flex-direction: column;
149+
}
150+
151+
.mousecontainer {
152+
width: 30px;
153+
height: 30px;
154+
overflow: hidden;
155+
}
156+
157+
.lmb .lmbutton, .rmb .lmbutton, .mm .lmbutton, .mmu .lmbutton, .mmd .lmbutton, .mml .lmbutton, .mmr .lmbutton {
158+
width:12px;
159+
height:25px;
160+
background-color:gray;
161+
border-radius: 10px 5px 3px 3px;
162+
}
163+
164+
.lmb .rmbutton, .rmb .rmbutton, .mm .rmbutton, .mmu .rmbutton, .mmd .rmbutton, .mml .rmbutton, .mmr .rmbutton {
165+
width:12px;
166+
height:25px;
167+
background-color:gray;
168+
border-radius: 5px 10px 3px 3px;
169+
margin-right: -17px;
170+
margin-left: 6px;
171+
}
172+
173+
.lmb .wheel, .rmb .wheel, .mm .wheel, .mmu .wheel, .mmd .wheel, .mml .wheel, .mmr .wheel {
174+
height: 12px;
175+
width: 4px;
176+
margin-top: 7px;
177+
border-radius: 20px;
178+
background-color:gray;
179+
}
180+
181+
.lmb .mbody, .rmb .mbody, .mm .mbody, .mmu .mbody, .mmd .mbody, .mml .mbody, .mmr .mbody {
182+
width: 30px;
183+
margin-top: 2px;
184+
height:3px;
185+
background-color:gray;
186+
border-radius: 50px;
187+
}
188+
189+
190+
.mmu .scrollup {
191+
position:absolute;
192+
width: 0;
193+
height: 0;
194+
border-style: solid;
195+
border-width: 0 3px 6px 3px;
196+
margin-left: -1px;
197+
border-color: transparent transparent #58aea3 transparent;
198+
}
199+
200+
.mmd .scrolldown {
201+
position:absolute;
202+
width: 0;
203+
height: 0;
204+
border-style: solid;
205+
border-width: 6px 3px 0 3px;
206+
border-color: #58aea3 transparent transparent transparent;
207+
margin-top:20px;
208+
margin-left: -1px;
209+
}
210+
211+
.mml .wheell {
212+
position:absolute;
213+
width: 0;
214+
height: 0;
215+
border-style: solid;
216+
border-width: 3px 6px 3px 0;
217+
border-color: transparent #58aea3 transparent transparent;
218+
margin-top:10px;
219+
margin-left: -6px;
220+
}
221+
222+
.mmr .wheelr {
223+
position:absolute;
224+
width: 0;
225+
height: 0;
226+
border-style: solid;
227+
border-width: 3px 0 3px 6px;
228+
border-color: transparent transparent transparent #58aea3;
229+
margin-top:10px;
230+
margin-left: 4px;
231+
}
232+
233+
.me1 .lmbutton, .me2 .lmbutton {
234+
width:12px;
235+
height:5px;
236+
margin-left:4px;
237+
background-color:gray;
238+
border-radius: 10px 5px 5px 10px;
239+
}
240+
241+
.me1 .rmbutton, .me2 .rmbutton {
242+
width:12px;
243+
height:5px;
244+
background-color:gray;
245+
border-radius: 5px 10px 10px 5px;
246+
margin-left: 2px;
247+
}
248+
249+
.me1 .mbody, .me2 .mbody {
250+
width: 27px;
251+
margin-top: 2px;
252+
height:23px;
253+
background-color:gray;
254+
border-radius: 4px 2px 0px 0px;
255+
}
256+
257+
258+
259+
.me1 .mextrabutton1, .me1 .mextrabutton2, .me2 .mextrabutton1, .me2 .mextrabutton2 {
260+
height: 9px;
261+
width: 3px;
262+
background-color: #626262;
263+
margin-top:2px;
264+
border-radius: 30px 0px 0px 30px
265+
}
266+
267+
.me1 .mextrabutton1, .me2 .mextrabutton1 {
268+
margin-top:5px;
269+
}
270+
271+
.lmb .lmbutton, .rmb .rmbutton, .mm .wheel, .me1 .mextrabutton1, .me2 .mextrabutton2 {
272+
background-color: #58aea2;
273+
}
274+
275+
```
276+
277+
Credits
278+
-------
279+
280+
Following Libraries are included and used:
281+
282+
* [FileSaver.js](https://github.com/eligrey/FileSaver.js) - Licensed under the MIT License
283+
* [html2canvas](https://html2canvas.hertzen.com/) - Licensed under the MIT License
284+
* [JSZip](https://stuk.github.io/jszip/) - Licensed under the MIT License

0 commit comments

Comments
 (0)