-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
424 lines (409 loc) · 18.9 KB
/
Copy pathindex.html
File metadata and controls
424 lines (409 loc) · 18.9 KB
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
<!DOCTYPE html>
<html lang="es" xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta charset="utf-8">
<title>Golden8bits</title>
<meta name="Description" content="Golden8bits is a minimalistic game and Fantasy console. The game includes the possibility of creating graphics, levels, animations; all in the same environment. No programming knowledge is needed." />
<meta name="keywords" content="pixelart, indiegame, fantasyconsole, game, golden8bits, level, editor, juegos, 8x8, pixels, golden, bits, 8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/png" href="img/golden8bits icon 64x64.png">
<link rel="icon" type="image/png" href="img/128.png">
<link rel="icon" type="image/png" href="img/256.png">
<meta property="og:image" content="https://criptomediastudios.github.io/img/512.png" />
</head>
<body style="margin-top: 50px;">
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Boton menu para mobile -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand" style="margin: -5px 0px 0px 0px;">
<img width="32" class="img-thumbnail" src="img/golden8bits icon 64x64.png" alt="">
</a>
</div>
<!-- Contenido de la barra menu -->
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav">
<li><a href="#about">About</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button">Manual <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#interface">Interface</a></li>
<li class="divider"></li>
<li><a href="#pixeleditor">Pixel Editor</a></li>
<li><a href="#animator">Animator</a></li>
<li><a href="#texteditor">Text Editor</a></li>
<li><a href="#assetslib">Assets Lib</a></li>
<li><a href="#leveleditor">Level Design</a></li>
</ul>
</li>
<li><a target="_blank" href="https://store.steampowered.com/app/794230/Golden8bits/">Buy Now</a></li>
<li><a href="#blog">Blog</a></li>
<li><a target="_blank" href="https://www.youtube.com/watch?v=t7UYPBBTcXk">Tutorial 1</a></li>
<li><a target="_blank" href="https://www.youtube.com/watch?v=1Xaer1E7EE4">Tutorial 2</a></li>
<li><a target="_blank" href="https://youtu.be/Jxsz1t0J7G0">Tutorial 3</a></li>
</ul>
<!-- iconos de redes sociales -->
<ul class="nav navbar-nav navbar-right" style="padding-top: 10px">
<a href="https://www.facebook.com/Criptomedia/">
<i class="fa fa-facebook-official" style="font-size:2em;"></i>
</a>
<a href="https://twitter.com/Criptomedia">
<i class="fa fa-twitter" style="padding-left:10px; font-size:2em;"></i>
</a>
<a href="https://www.instagram.com/criptomediastudios/">
<i class="fa fa-instagram" style="padding-left:10px; font-size:2em;"></i>
</a>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<div class="row" style="margin: 0px -15px 0px -15px">
<div class="col-md-12">
<!-- Carousel -->
<div class="carousel slide" id="carousel1" data-ride="carousel">
<!-- Indicadores -->
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide="0" class="active"></li>
<li data-target="#carousel1" data-slide="1"></li>
<li data-target="#carousel1" data-slide="2"></li>
</ol>
<!-- Contenido de los slides-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="img/golden8bits splash.png" alt="">
</div>
<div class="item">
<img class="img-responsive" src="img/golden8bits editor.png" alt="">
</div>
<div class="item">
<img class="img-responsive" src="img/golden8bits game.png" alt="">
</div>
</div>
<!-- Controles -->
<a href="#carousel1" class="left carousel-control" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a href="#carousel1" class="right carousel-control" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
</div>
</div>
</div>
<div class="main row" id="about">
<br>
<!-- About section -->
<article class="col-xs-12 col-sm-12 col-md-6">
<p>
<h1 class="page-header">Golden8bits <small>Fantasy Console</small><a target="_blank" style="margin-left: 10px;" href="https://store.steampowered.com/app/794230/Golden8bits/" class="btn btn-success">Buy Now</a></h1>
<p class="text-muted text-justify"><img style="float:left; padding-right: 10px;" class="img-responsive" src="img/golden8bits icon 64x64.png" alt="">Golden8Bits is a software that offers a simple and intuitive interface, where users can create a video game without touching a line of code, abstracting from the process of integrating multiple work platforms.</p>
<p class="text-muted text-justify">The software includes the possibility of creating graphics, levels, animations and we are working to add music / sound creation too; all in the same environment. No programming knowledge is needed.</p>
<p class="text-muted text-justify">We always wanted to have a comprehensive tool to channel our ideas in a fast and fun way without having to resort to several softwares, from there the idea of golden8bits was born. A development environment for everything. We do not aim to compete with big development engines, but give the possibility to quickly create a sketch, mockup of a pixelart 8bits style game.</p>
<p class="text-muted text-justify">Create a video game entirely without touching a line of code! </p>
</p>
</article>
<aside class="col-xs-12 col-sm-12 col-md-6">
<br>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h4><span class="glyphicon glyphicon-film"></span> Trailer</h4>
</div>
<div class="panel-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Zfuf5PeWaJs" allowfullscreen></iframe>
</div>
</div>
</div>
</aside>
</div>
<!-- MANUAL -->
<div class="manual row" id="interface">
<br>
<div class="col-md-12">
<h1 class="page-header">Manual <small>Brief Instructions</small>
<a target="_blank" style="margin-left: 10px;" href="https://criptomediastudios.github.io/documents/golden8bits manual.pdf" class="btn btn-primary">Download Manual</a>
<a target="_blank" style="margin-left: 10px;" href="https://www.youtube.com/watch?v=t7UYPBBTcXk" class="btn btn-success">Video Tutorial 1</a>
<a target="_blank" style="margin-left: 10px;" href="https://www.youtube.com/watch?v=1Xaer1E7EE4" class="btn btn-success">Video Tutorial 2</a>
<a target="_blank" style="margin-left: 10px;" href="https://youtu.be/Jxsz1t0J7G0" class="btn btn-success">Video Tutorial 3</a>
</h1>
</div>
<!-- Interface manual -->
<article class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-success">
<div class="panel-heading">
<div class="media">
<div class="media-left"><img width="64" class="img-rounded" src="img/pixel shield.png" alt=""></div>
<div class="media-body"><h3>Interface</h3></div>
</div>
</div>
<div class="panel-body">
<h4>Splash Screen</h4>
<img id="splashImg" src="img/cartridge golden8bits.png" class="img-responsive">
<caption>
There are 3 options in the splash:
<ol>
<li>Click to play the game.</li>
<li>Click to edit the game.</li>
<li>Click to config the cartridge.</li>
</ol>
</caption>
<p><strong>Config Cartridge Window</strong></p>
<img id="" src="img/cartridge g8b.png" class="img-responsive img-rounded">
<caption>
Config cartridge:
<ol>
<li>The clear button reset the cartridge.</li>
<li>Canvas to edit icon.</li>
<li>Field to edit name.</li>
</ol>
</caption>
<p><strong>Edit Mode</strong></p>
<img id="interfaceImg" src="img/g8b user interface.png" class="img-responsive">
<caption>
The edit mode have 5 primary windows:
<ol>
<li>Level editor</li>
<li>Pixel editor</li>
<li>Animator</li>
<li>Text editor</li>
<li>Assets lib</li>
</ol>
</caption>
</div>
<div class="panel-footer">Manual 1/6</div>
</div>
</article>
<!-- Level Editor manual -->
<article class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-success">
<div class="panel-heading">
<div class="media">
<div class="media-left"><img width="64" class="img-rounded" src="img/level editor icon.png" alt=""></div>
<div id="leveleditor" class="media-body"><h3>Level Editor</h3></div>
</div>
</div>
<div class="panel-body">
<h4>Level editor window</h4>
<img id="" src="img/level editor window.png" class="img-responsive">
<caption>The first window is the level editor, its top bar have several buttons.</caption>
</div>
<div class="panel-body">
<ol>
<li><p><img src="img/level item entity btn.png" alt=""> These buttons change the type of tiles.</p></li>
<li><p><img src="img/play btn.png" alt=""> Click to test the current level.</p></li>
<li><p><img src="img/bg-color icon.png" alt=""> Open a color picker to change the background color.</p></li>
<li><p><img src="img/level bar.png" alt=""> On this bar you can switch between levels and create new ones.</p></li>
<li><p><img src="img/save icon.png" alt=""> Save your current level change.</p></li>
<li><p><img src="img/scroll icon.png" alt=""> While this button is active you can drag the level upwards, downwards, forwards and backwards.</p></li>
<li><p><img src="img/delete level icon.png" alt=""> Delete the current level.</p></li>
</ol>
</div>
<div class="panel-body">
<p><strong>Level painting</strong></p>
<img id="" src="img/level paint.gif" class="img-responsive">
<caption>To paint tiles on the level just press the left mouse button. Erase the tile with the right mouse button.</caption>
</div>
<div class="panel-footer">Manual 2/6</div>
</div>
</article>
<div class="clearfix visible-md-block visible-lg-block"></div>
<!-- PixelEditor manual -->
<article class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-success">
<div class="panel-heading">
<div class="media">
<div class="media-left"><img width="64" class="img-rounded" src="img/pixel heal.png" alt=""></div>
<div id="pixeleditor" class="media-body"><h3>Pixel Editor</h3></div>
</div>
</div>
<div class="panel-body">
<h4>Pixel editor window</h4>
<img id="" src="img/pixel painting golden8bits.gif" class="img-responsive">
<caption>
This window have 3 sections:
<ol>
<li>A button bar.</li>
<li>The color pallet.</li>
<li>Canvas.</li>
</ol>
</caption>
</div>
<div class="panel-body">
<p><strong>Button bar:</strong></p>
<ol>
<li><p>The first button is a toggle to select the type of tile:</p>
<ul>
<li><p><img src="img/g8b bg toggle.png" alt=""> Background tile.</p></li>
<li><p><img src="img/g8b collision toggle.png" alt=""> Collision tile.</p></li>
<li><p><img src="img/g8b break toggle.png" alt=""> Breakable tile.</p></li>
</ul>
</li>
<li><p><img src="img/g8b eraser btn.png" alt=""> This second button erase completely the canvas.</p></li>
<li><p><img src="img/save icon.png" alt=""> Click to save the tile.</p></li>
</ol>
</div>
<div class="panel-footer">Manual 3/6</div>
</div>
</article>
<!-- Animator manual -->
<article class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-success">
<div class="panel-heading">
<div class="media">
<div class="media-left"><img width="64" class="img-rounded" src="img/pixel skull.png" alt=""></div>
<div id="animator" class="media-body"><h3>Animator</h3></div>
</div>
</div>
<div class="panel-body">
<h4>Animator interface</h4>
<img src="img/animator interface golden8bits.png" alt="" class="img-responsive">
<caption>
This window have 3 sections:
<ol>
<li>Tool bar.</li>
<li>Frame bar.</li>
<li>Library of animations.</li>
</ol>
</caption>
</div>
<div class="panel-body">
<p><strong>Tool bar:</strong></p>
<ul>
<li><p><img src="img/delay bar g8b.gif" alt=""> The delay bar, change the frame rate animation.</p></li>
<li><p><img src="img/new frame g8b.png" alt=""> Click to create a new frame.</p></li>
<li><p><img src="img/Delete frame g8b.png" alt=""> Click to delete the current frame.</p></li>
</ul>
<p><strong>Frame bar:</strong></p>
<img src="img/Frame bar g8b.png" alt="">
<ul>
<li><p>The left image show the animation. <br><small>click to play animation</small></p></li>
<li><p>All the right images show the frames. <br><small>double click on any frame to edit</small></p></li>
</ul>
<p><strong>Library of animations:</strong></p>
<img src="img/Animation lib g8b.png" alt="">
<ul>
<li><p>Click on any frame to play animation.</p></li>
<li><p>Double click on any frame to edit.</p></li>
<li><p>Click on the "+" frame to create new animation.</p></li>
</ul>
</div>
<div class="panel-footer">Manual 4/6</div>
</div>
</article>
<div class="clearfix visible-md-block visible-lg-block"></div>
<!-- TextEditor manual -->
<article class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-success">
<div class="panel-heading">
<div class="media">
<div class="media-left"><img width="64" class="img-rounded" src="img/pixel sword.png" alt=""></div>
<div id="texteditor" class="media-body"><h3>Text Editor</h3></div>
</div>
</div>
<div class="panel-body">
<h4>Text editor window</h4>
<img src="img/Text editor 1.png" alt="">
<p>Bar content:</p>
<ul>
<li><p><img src="img/save icon.png" alt=""> Save changes</p></li>
<li><p><img src="img/Toggle button.png" alt=""> Change between "text editor" and "select text" windows</p></li>
</ul>
</div>
<div class="panel-body">
<h4>Select text window</h4>
<img src="img/Text editor 2.png" alt="">
<p>Bar content:</p>
<ul>
<li><p><img src="img/new frame g8b.png" alt=""> Create new text.</p></li>
<li><p>Double click on any text file to open and edit.</p></li>
</ul>
</div>
<div class="panel-footer">Manual 5/6</div>
</div>
</article>
<!-- Assets Lib manual -->
<article class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-success">
<div class="panel-heading">
<div class="media">
<div class="media-left"><img width="64" class="img-rounded" src="img/pixel heal.png" alt=""></div>
<div id="assetslib" class="media-body"><h3>Assets Lib</h3></div>
</div>
</div>
<div class="panel-body">
<h4>Assets Library</h4>
<img src="img/Assets lib.png" alt=""><br>
<caption>The assets library tiles change acording to the level editor.</caption>
</div>
<div class="panel-body">
<ul>
<li><p><img src="img/new frame g8b.png" alt=""> Create a new tile.</p></li>
<li><p>Click on the tile to paint on the "Level editor" window.</p></li>
<li><p>Double click to edit the tile on the "Pixel editor" window.</p></li>
</ul>
</div>
<div class="panel-footer">Manual 6/6</div>
</div>
</article>
</div>
<div class="blog row" id="blog">
<br>
<!-- Blog header -->
<div class="col-md-12">
<h1 class="page-header">Blog <small>Daily Notes</small></h1>
</div>
<!-- 15 03 18 -->
<div class="color1 col-xs-12 col-sm-12 col-md-6">
<img class="img-responsive" src="img/Dark level g8b.png" alt="">
<p>
<h1>Final levels</h1>
<p>Now that we have a beta of g8b our new goal is to create a little game on the fantasy console with a lot of levels, characters and items. This will make a easy learn curve for the user. To look at the mechanics and already entities created, thats what we hope.</p>
<br>
<small class="pull-right">15 03 18</small>
</p>
</div>
<div class="clearfix visible-md-block"></div>
<!-- 14 03 18 -->
<div class="col-xs-12 col-sm-12 col-md-6">
<p>
<h1>Trying new tiles</h1>
<p>Pixel by pixel the fire level its finally here. I just need more enemies for this part of the map and all will be good to go!. <br><br>We still dont know if the fire theme will be the final theme (green, rocks, dark, fire). Maybe an hour of game play is what it takes to show all mechanics that can be created on g8b. <br><br>Looking forward now finally for music composition, sound effects and maybe a new intro for the game trailer.</p>
</p>
<img class="img-responsive" src="img/Fire level g8b.png" alt="">
<br>
<small class="pull-right">14 03 18</small>
</div>
</div>
</div>
<footer>
<div class="container-fluid">
<figure style="position: relative; overflow: hidden;">
<img src="img/pie de pagina g8b.png" class="">
<div style=" position: absolute; right: 1%; bottom: 1%;">
<div class="panel panel-default" style="padding: 10px 10px;">
<p><strong>Contact:</strong> criptomediagames@gmail.com</p>
<a href="#"></a>
</div>
</div>
</figure>
</div>
</footer>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>