-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·259 lines (224 loc) · 13.4 KB
/
Copy pathindex.html
File metadata and controls
executable file
·259 lines (224 loc) · 13.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>drbn</title>
<meta name="description" content="a site to post game updates, photos, drawings, and anything else I feel like posting">
<!-- Recommended minimum -->
<meta property="og:title" content="drbn">
<meta property="og:description" content="a site to post game updates, photos, drawings, and anything else I feel like posting">
<meta property="og:image" content="img/site-image.jpg">
<meta name="twitter:card" content="summary_large_image">
<!-- You could also inline the stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>
<a href="#home">drbn</a>
</h1>
<nav>
<!-- <a href="#about">About</a> -->
<a href="#game-updates">Game Devlog</a>
<a href="#photos">Photos</a>
<a href="#projects">Projects</a>
</nav>
</header>
<main>
<section id="home"> <!-- HOME -->
<p>Welcome to my site</p>
<p>
I'm spending most of my time working on making a video game called <a href="https://store.steampowered.com/app/2745120/Scythe_Machine?utm_source=personal_site&utm_campaign=init&utm_medium=landing_page_bio">Scythe Machine</a> and plan to post updates and gifs here along with other photos and drawings.
I also post updates on <a href="https://www.reddit.com/user/ddrbnn">my reddit account</a>, as well as a few updates + photos + drawings on <a href="https://www.instagram.com/greetingcardsalesman/">my instagram.</a>
</p>
<br />
<a style="margin-bottom: 10px;" href="https://store.steampowered.com/app/2745120/Scythe_Machine?utm_source=personal_site&utm_campaign=init&utm_medium=landing_page_hero">Wishlist Scythe Machine now!</a>
<img class="standalone" loading="lazy" src="./img/gifs/sm_logo_aseprite.gif" />
<!-- <div class="grid large">
<img loading="lazy" src="./img/gifs/crowd-control.gif" />
<img loading="lazy" src="./img/gifs/sl2d-tilemap.gif" />
<img loading="lazy" src="./img/gifs/giant-runing.gif" />
</div> -->
<p style="font-size: 15px; margin-top: 10px;">If you'd like to get in touch, shoot an email to <a href="mailto:joshua@drubin.io">joshua@drubin.io</a></p>
</section>
<!-- <section id="about">
<p>todo</p>
</section> -->
<section id="game-updates"> <!-- GAME UPDATES -->
<article>
<h2>Back to the Devlog with a Character Rework <time datetime="2023-11-03">2023.11.03</time></h2>
<p>
Well it has been just over a year since I stopped making actual
posts. I fell off after just three entries, a new record. Well now I'm
back. I was finding it much easier to just post stories on
Instagram, but it feels too ephemeral now. I'd like to just have it
all in one place. I have been regularly working on Scythe Machine,
but since I don't have it in me to fill in a year's worth of
updates, I'll just mention the most recent one.
</p>
<video autoplay loop muted playsinline src="./img/devlog/tree-runner-rework-video.mp4"></video>
<p>
I just reworked the green fellas because they were the first enemy I
made over 2 years ago and the animations / control-scheme was out of
date. Below is part of the new sprite sheet that I generated after
exporting the 3d animations from Blender as a sequence of images
which then get put together in Aseprite to make the actual sheet.
</p>
<video autoplay loop muted playsinline src="./img/devlog/tree-runner-3d-video.mp4"></video>
<img loading="lazy" alt="" src="./img/devlog/spritesheet.jpg">
<p>
Then I pull that sprite sheet into Unity where it gets sliced up
with every frame receiving a label of some sort. Afterwards, I
personally use code to control the characters’ animations every
frame because the built-in animation tooling in Unity is kinda wack.
</p>
<p>
The first gif at the beginning of this post shows the green fellas
and their new animations / movement stuff. Excuse my poor aim in the
clip,, I’m working on it 😵💫
</p>
</article>
<article>
<h2>Import New Artwork in B&W <time datetime="2022-10-23">2022.10.23</time></h2>
<p>
Today I messed with some of the lines from the new artwork and
pulled it into the game to see how it looked. I haven't colored
anything yet, I wanted to see what it would look like in black and
white. While it does seem like it could possibly be worth exploring,
it feels a bit more like a story book than a game, which isn't
exactly what I'm going for. I think I'll spend some more time
today/tomorrow adding color in a way that will let me change it in
the game at runtime. Given that there will only be a few colors, my
plan is to color in the artwork in photoshop in greyscale, and then
write a shader in Unity that will map those greyscale color values
to some color parameters that I can specify either in code or via
the Unity UI.
</p>
<img loading="lazy" alt="" src="./img/devlog/new-artwork.gif">
</article>
<article>
<h2>Giant Re-work and Rig <time datetime="2022-10-19">2022.10.19</time></h2>
<p>
I got some sick environment artwork done by <a
href="https://www.instagram.com/snail.farm/">Jackson at Snail
Farm</a> so I reworked the Giant character to match the artwork. The
character has a weapon now, which I was hesitant to do at first
because it complicates everything; the rigging, animating, in-game
logic and effects are all harder to setup and deal with. But I do
think it'll probably lead to a more interesting boss fight with more
ways to create different kinds of attacks/obstacles. I just finished
rigging the character with different weapon slots in Blender (i.e. I
now have different ways of controlling the weapon/limbs of the
character when animating) so I can finally get to the actual
animations. For now, I'm going to just start off with getting the
giant to stand up and walk around. Once that's in place, I plan on
spending time to work with the artwork to try and figure out the
best way to include it in the game. The first thing I'll try is to
hand-paint a normal map on top of the artwork, bring it into the
game, and get the lighting / colors to look good.
</p>
<img loading="lazy" alt="" src="./img/devlog/giant-rigged.gif">
</article>
<article>
<h2>Giant Attack Animation <time datetime="2022-10-05">2022.10.05</time></h2>
<p>
Started working on the giant's first attack animation. At first the
thought was that he should dive the player(s) and cause a shockwave,
so I animated that. Then I realized I had to animate the giant
getting up and going back to idle somehow, but thought it felt kind
of boring. So I ended the dive with the giant going into a headstand
ready to start spinning into his next attack like a damn Beyblade.
Let it rip baby.
<label for="beyblade-footnote">1</label>
<input type="checkbox" id="beyblade-footnote">
<small>
<img src="./img/devlog/beyblade.jpg">
</small>
</p>
<img loading="lazy" alt="" src="./img/devlog/giantdive.gif">
</article>
</section>
<section id="photos"> <!-- PHOTOS -->
<p>
here are some of my photos
<label for="photo-footnote">1</label>
<input type="checkbox" id="photo-footnote">
<small>
• 📷 minolta x700 </br>
• 📷 sony a7iii
</small>
</p>
<!-- You can use this grid of images in any page -->
<div class="grid">
<a href="#img-01"><img loading="lazy" alt="" src="./img/thumbnails/bk-night-jogger.jpg"></a>
<a href="#img-02"><img loading="lazy" alt="" src="./img/thumbnails/redrock-brian-climb.jpg"></a>
<a href="#img-03"><img loading="lazy" alt="" src="./img/thumbnails/bk-studio-laslo.jpg"></a>
<a href="#img-04"><img loading="lazy" alt="" src="./img/thumbnails/sf-flowers.jpg"></a>
<a href="#img-05"><img loading="lazy" alt="" src="./img/thumbnails/sf-cypress.jpg"></a>
<a href="#img-06"><img loading="lazy" alt="" src="./img/thumbnails/jono_friction_with_chalk_final_3.jpg"></a>
<a href="#img-07"><img loading="lazy" alt="" src="./img/thumbnails/moab-nathan-spelunk.jpg"></a>
<a href="#img-08"><img loading="lazy" alt="" src="./img/thumbnails/squamish-moss-1.jpg"></a>
<a href="#img-09"><img loading="lazy" alt="" src="./img/thumbnails/redrock-goofball-greg.jpg"></a>
<a href="#img-10"><img loading="lazy" alt="" src="./img/thumbnails/squamish-moss-2.jpg"></a>
<a href="#img-11"><img loading="lazy" alt="" src="./img/thumbnails/bk-ocean.jpg"></a>
<a href="#img-12"><img loading="lazy" alt="" src="./img/thumbnails/squam-moonrock.jpg"></a>
<a href="#img-13"><img loading="lazy" alt="" src="./img/thumbnails/boulder-town.jpg"></a>
<a href="#img-14"><img loading="lazy" alt="" src="./img/thumbnails/moab-nathan-spelunk-2.jpg"></a>
<a href="#img-15"><img loading="lazy" alt="" src="./img/thumbnails/boulder-shelby.jpg"></a>
</div>
</section>
<section id="projects"> <!-- PORTFOLIO -->
<p>todo</p>
<!-- <div class="slides">
<figure><img loading="lazy" alt="" src="https://dummyimage.com/4000x3000/ddd/bbb"></figure>
<figure><img loading="lazy" alt="" src="https://dummyimage.com/3000x4000/ddd/bbb"></figure>
<figure><img loading="lazy" alt="" src="https://dummyimage.com/4000x3000/ddd/bbb"></figure>
<figure>
<p>You could also have text over here…</p>
</figure>
<figure>
<img loading="lazy" alt="" src="https://dummyimage.com/1000x1000/ddd/bbb">
<figcaption>…or image captions</figcaption>
</figure>
<figure style="background:#fdcb39">
<img loading="lazy" alt="" src="https://dummyimage.com/3000x4000/ddd/bbb">
<figcaption>add a solid background</figcaption>
</figure>
<figure class="cover">
<img loading="lazy" alt="" src="https://64.media.tumblr.com/7904066936b9324571738bbbeeb082e9/tumblr_myopxy8uJI1qz4vi0o1_1280.jpg">
<p style="color:#fff">or go full bleed</p>
</figure>
</div> -->
</section>
<section id="another-page"> <!-- ANOTHER PAGE -->
<p>This page is not referenced in the menu, yet it exists.</p>
<p><a href="#about">← back</a></p>
</section>
</main>
<!-- ----------
LIGHTBOX IMAGES
----------- -->
<!-- PHOTOS grid -->
<a href="#photos" class="lightbox" id="img-01"><img loading="lazy" alt="" src="./img/fullres/bk-night-jogger.jpg"></a>
<a href="#photos" class="lightbox" id="img-02"><img loading="lazy" alt="" src="./img/fullres/redrock-brian-climb.jpg"></a>
<a href="#photos" class="lightbox" id="img-03"><img loading="lazy" alt="" src="./img/fullres/bk-studio-laslo.jpg"></a>
<a href="#photos" class="lightbox" id="img-04"><img loading="lazy" alt="" src="./img/fullres/sf-flowers.jpg"></a>
<a href="#photos" class="lightbox" id="img-05"><img loading="lazy" alt="" src="./img/fullres/sf-cypress.jpg"></a>
<a href="#photos" class="lightbox" id="img-06"><img loading="lazy" alt="" src="./img/fullres/jono_friction_with_chalk_final_3.jpg"></a>
<a href="#photos" class="lightbox" id="img-07"><img loading="lazy" alt="" src="./img/fullres/moab-nathan-spelunk.jpg"></a>
<a href="#photos" class="lightbox" id="img-08"><img loading="lazy" alt="" src="./img/fullres/squamish-moss-1.jpg"></a>
<a href="#photos" class="lightbox" id="img-09"><img loading="lazy" alt="" src="./img/fullres/redrock-goofball-greg.jpg"></a>
<a href="#photos" class="lightbox" id="img-10"><img loading="lazy" alt="" src="./img/fullres/squamish-moss-2.jpg"></a>
<a href="#photos" class="lightbox" id="img-11"><img loading="lazy" alt="" src="./img/fullres/bk-ocean.jpg"></a>
<a href="#photos" class="lightbox" id="img-12"><img loading="lazy" alt="" src="./img/fullres/squam-moonrock.jpg"></a>
<a href="#photos" class="lightbox" id="img-13"><img loading="lazy" alt="" src="./img/fullres/boulder-town.jpg"></a>
<a href="#photos" class="lightbox" id="img-14"><img loading="lazy" alt="" src="./img/fullres/moab-nathan-spelunk-2.jpg"></a>
<a href="#photos" class="lightbox" id="img-15"><img loading="lazy" alt="" src="./img/fullres/boulder-shelby.jpg"></a>
<!-- Other images -->
<a href="#about" class="lightbox" id="img-about"><img loading="lazy" alt="" src="https://dummyimage.com/2400x1200/ddd/bbb"></a>
</body>
</html>