-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathportfolio_project3.html
613 lines (503 loc) · 28.6 KB
/
portfolio_project3.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
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
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
<link rel="stylesheet" href="assets\css\w3.css">
<link rel="stylesheet" href="font.css">
<link rel="stylesheet" href="assets\css\3dbutton.css" \>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body, h1, h2, h3, h4, h5, h6 {
font-family: "Lato", sans-serif;
}
.w3-myfont{
font-family: "Lato_TC", normal;
}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* First image (Logo. Full height) */
.bgimg-1 {
background-image: url("pictures/main_page/main_project_3.png");
min-height: 100%;
/*min-height: 600px;*/
}
/* Second image (Portfolio) */
.bgimg-2 {
background-image: url("pictures/portfolio_sub_page/project_3_css_slide/proj3_origin.png");
min-height: 100%;
}
/* Third image (Contact) */
.bgimg-3{
background-image: url("pictures/portfolio_sub_page/project_3_css_slide/proj3_gameplay.png");
min-height: 100%;
}
.bgimg-4{
background-image: url("pictures/portfolio_sub_page/project_3_css_slide/proj3_output_followup.png");
min-height: 100%;
}
.w3-wide {
letter-spacing: 10px;
}
.w3-hover-opacity {
cursor: pointer;
}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
background-attachment: scroll;
min-height: 400px;
}
}
span.mcserver {
font-size: 150%;
}
</style>
<title>【專案三】 回憶重現、模仿、參考改編</title>
<body>
<div class="w3-top">
<div class="w3-bar" id="myNavbar">
<a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onClick="toggleFunction()" title="Toggle Navigation Menu">
<i class="fa fa-bars"></i> </a>
<a href="index.html#" class="w3-bar-item w3-button">HOME</a>
<a href="index.html#about" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-user"></i>ABOUT</a>
<a href="index.html#contact" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-envelope"></i> CONTACT</a>
<a href="index.html#duty" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> DUTY</a>
<div class="w3-dropdown-hover w3-hide-small">
<button class=" w3-button" title="More">PORTFOLIO <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item"> Minecraft -- 伺服器營運 (頁面未準備就緒)</th>
<a href="portfolio_project2.html" class="w3-bar-item w3-button"> 畢業作品 -- 影子的內心 </th>
<a href="portfolio_project3.html" class="w3-bar-item w3-button"> Nanaimo -- 回憶重現作品 </th>
<a href="portfolio_project4_6.html" class="w3-bar-item w3-button"> Cities Skyline -- 3D 模組製作</th>
<a href="portfolio_project7.html" class="w3-bar-item w3-button"> Minecraft -- 列車報站 平面設計 </th>
<a href="portfolio_project11.html" class="w3-bar-item w3-button"> 質數 X RPG遊戲</th>
<a href="portfolio_project13.html" class="w3-bar-item"> GGJ 2023 -- The Roots of Our Needs</th>
<a href="portfolio_project14.html" class="w3-bar-item"> GGJ 2024 -- Cat laughter</th>
</div>
</div>
<a href="skill.html" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-user"></i> SKILL</a>
<a href="media_archive.html" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> Media Archive</a>
<a href="other_archive.html" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> Other Archive</a>
</div>
<!-- Navbar (sit on top) -->
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium"> <a href="main.html#about" class="w3-bar-item w3-button" onClick="toggleFunction()">ABOUT</a> <a href="#skill" class="w3-bar-item w3-button" onClick="toggleFunction()">Skill</a> <a href="portfolio_main.html" class="w3-bar-item w3-button" onClick="toggleFunction()">PORTFOLIO</a> <a href="media_archive.html" class="w3-bar-item w3-button" onClick="toggleFunction()">Media Archive</a> <a href="other_archive.html" class="w3-bar-item w3-button" onClick="toggleFunction()">Other Archive</a> <a href="main.html#contact" class="w3-bar-item w3-button" onClick="toggleFunction()">CONTACT</a> </div>
</div>
<!-- Navbar (sit on top) -->
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium"> <a href="main.html#about" class="w3-bar-item w3-button" onClick="toggleFunction()">ABOUT</a> <a href="#skill" class="w3-bar-item w3-button" onClick="toggleFunction()">Skill</a> <a href="index.html" class="w3-bar-item w3-button" onClick="toggleFunction()">PORTFOLIO</a> <a href="media_archive.html" class="w3-bar-item w3-button" onClick="toggleFunction()">Media Archive</a> <a href="other_archive.html" class="w3-bar-item w3-button" onClick="toggleFunction()">Other Archive</a> <a href="main.html#contact" class="w3-bar-item w3-button" onClick="toggleFunction()">CONTACT</a> </div>
</div>
<!-- Navbar on small screens -->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
</div>
<!-- Logo Text -->
<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64 w3-myfont" id="about">
<br>
<div class="w3-center">
<h3 class="w3-center w3-myfont" id="proj4_intro">【專案三】 回憶重現、模仿、參考改編</h3>
<h3 class="w3-center w3-myfont">Project III : Nanaimo Rebuild </h3>
<h6 class="w3-center w3-myfont">注意：本專案規劃時以中文為主要語言，因此此頁暫只提供中文版本。 </h6>
<h6 class="w3-center w3-myfont">Temporarily available in Chinese ONLY, since project was planned in Chinese as project core language. </h6>
<br>
<hr> <hr>
<br>
<h3 class="w3-center w3-myfont" id="proj4_intro">【提案部分】</h3>
<h3 class="w3-center w3-myfont">Project Planning </h3>
</div>
</div>
</div>
</div>
<div class="w3-row">
<div class="w3-col m6 w3-center w3-padding-large ">
<h3 class="w3-center w3-myfont">【由零開始的創作理念】<br>(Project Concept)</h3>
<h4 class="w3-center w3-myfont">
從空白檔案開始做起一隻遊戲，對專案的計劃人來說是一個難度挑戰。<br><br>
而我在Youtube上收看了來自ExtraCredit頻道，<br>以Cloning game for a MVP(Minimum Viable Product) project一集之後，<br>
我就覺得可以用這個「里程碑發展模式」去做這一個專案。如是者就開始了。
<br>
<br> (以下圖片為所選的創作理念 第九，及其他舉例用的里程碑的草議)
<br>
</h4>
<img src="pictures\portfolio_sub_page\project_3_conceptual_intro_pic\proj3_origin_concept.JPG" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="所選的創作理念 其一" width="600"height="500" onClick="onClick(this)">
<br>
</div>
<!-- Hide this text on small devices -->
<div class="w3-col m6 w3-hide-small w3-padding-large">
<h4 class=" w3-myfont">【本作目的/目標】 (Aim / Perspective)</h4>
<h5 class=" w3-myfont"> ● 本作制作的目的是想以模仿致敬方式， 重構原遊戲的一小部分，作<b>相片／影片形式以外</b>的回憶錄。</h5>
<h5 class=" w3-myfont"> ● 一小部分意思只是指，把飛行、卡片收集兩項， 提取精要部分後；改編製成一個場景(Screen)的最簡可行產品 (
Minimum Viable Product )。</h5></h5>
<br>
<h4 class="w3-center w3-myfont">【使用技能 / 軟件】(Used skill sectors)</h4>
<h5 class=" w3-myfont"> ● Unity 5.14f, 5.40f </h5>
<h5 class=" w3-myfont"> ● Autodesk 3Ds Max 2014, 2017 </h5>
<h5 class=" w3-myfont"> ● Adobe Photoshop CS6 </h5>
<h5 class="w3-myfont"> ● Unity API - Javascript </h5>
<h5 class="w3-myfont"> ● Unity API - C# </h5>
<br>
<h4 class="w3-center w3-myfont">【預計操作系統要求】(Operation System)</h4>
<h5 class=" w3-myfont"> ● Microsoft Windows 7 - 10 </h5>
<h5 class=" w3-myfont"> ● Android 手機版本(測試兼容中) </h5>
<br>
</div>
</div>
<br>
<hr>
<div class="bgimg-2 w3-display-container w3-opacity-min" id="home">
</div>
<div class="w3-center">
<h3 class="w3-center w3-myfont" id="proj4_intro">【原作元素介紹】</h3>
<h3 class="w3-center w3-myfont">Introduction of Original Product</h3>
<h5 class=" w3-myfont">原作走卡通風格人物及建築。而原作有著不同機制。 <br>
如集卡、卡片現化、竉物、村落、關卡結構、交易所、商店、玩家小屋等等...... <br>
玩家可以在村落的關卡飛行，過後可以把卡片現化或是將卡片販賣到交易所。 <br>
或是提升玩家小屋的熱點，去獲得更多獎勵/權利。 <br>
也可以在村落間遊走，到商店以消費券獲得對角色有幫助的商品。 <br> </h5>
</div>
<br>
<hr>
<div class="w3-center">
<h3 class="w3-center w3-myfont" id="proj4_intro">【將繼承以下原作元素】</h3>
<h3 class="w3-center w3-myfont">Cloning elements from original </h3>
<h5 class=" w3-myfont"> ● 漸進難度的關卡 </h5>
<h5 class=" w3-myfont"> ● 販賣戰利品商店 </h5>
<h5 class=" w3-myfont"> ● 集卡、卡片現化 </h5>
<h5 class=" w3-myfont"> ● 道具系統 </h5>
</div>
<br>
<hr>
</div>
<div class="bgimg-3 w3-display-container w3-opacity-min" id="home"> </div>
<div class="w3-row">
<!-- Hide this text on small devices -->
<h4 class="w3-center w3-myfont">【遊戲特色/機制設定】 (Unique Gameplay System)</h4>
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class=" w3-center w3-myfont"> <b> 一) 「集卡、卡片現化」</b></h4>
<br>
<h5 class=" w3-myfont">
<h5 class=" w3-myfont"> ● 里程碑［十一］所屬</h5>
<h5 class=" w3-myfont"> ●玩家可以在戰鬥過程獲得卡片，並將其現化成不同道具。</h5>
<h5 class=" w3-myfont"> ● 卡片會進入集卡冊（二），等待玩家現化卡片。</h5>
<h5 class=" w3-myfont"> ● 玩家共有八類卡片現化，包括所有特殊類卡片。金錢、道具、衣服、住屋、寵物、技能、活動、經驗提升卡片。</h5>
<br>
<p><b><i class="fa fa-user w3-margin-right"></i>「集卡、卡片現化」(其一例子)</b></p>
<img src="pictures\portfolio_sub_page\project_3\card_deck.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="「集卡、卡片現化」(其一例子)" width="600" height="500">
<br>
</div>
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class="w3-center w3-myfont"> <b> 二) 「集卡冊」</b></h4>
<br> <h5 class=" w3-myfont">
<h5 class=" w3-myfont"> ● 里程碑［二十七］所屬 </h5>
<h5 class=" w3-myfont"> ●進入集卡冊的卡片，可以直接按下卡片圖案／使用快捷鍵現化有關卡片；前提是要有現化匙。</h5>
<h5 class=" w3-myfont"> ● 玩家共有八類卡片現化，包括所有特殊類卡片。金錢、道具、衣服、住屋、寵物、技能、活動、經驗提升卡片。</h5>
<br>
<p><b><i class="fa fa-user w3-margin-right"></i> 「集卡冊」(其一例子)</b></p>
<img src="pictures\portfolio_sub_page\project_3\card_deck.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="「集卡冊」(其一例子)" width="600" height="500">
<br>
</div>
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class="w3-center w3-myfont"> <b> 三) 「漸進關卡的難度」</b></h4>
<br>
<h5 class=" w3-myfont"> ● 里程碑［十七］所屬 </h5>
<h5 class=" w3-myfont"> ● 漸進關卡的難度令遊戲更具挑戰性，而怪物及所以會影響難度的參數都會修改。</h5>
<h5 class=" w3-myfont"> ● 漸進難度經過作者親手去平衡難度，可以放心，不會過難。</h5>
<br>
<p><b><i class="fa fa-user w3-margin-right"></i> 「漸進關卡的難度」 (截圖一)</b></p>
<img src="pictures\portfolio_sub_page\project_3\progressive_difficuity.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="「漸進關卡的難度」 (截圖一)" width="600" height="500">
<br>
</div>
<hr>
</div>
<div class="w3-row">
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class=" w3-center w3-myfont"> <b> 四) 「販賣戰利品，及道具系統」</b></h4>
<br>
<h5 class=" w3-myfont">
<h5 class=" w3-myfont"> ● 里程碑［十一］、［二十七］共同所屬 </h5>
<h5 class=" w3-myfont"> ● 玩家可以將寶石卡片現化成寶石；現在寶石介面已經大幅刪減簡化。在前台只會顯示玩家擁有的總量。而後台有不同種類的寶石，不同售價。</h5>
<h5 class=" w3-myfont"> ● 之後的里程碑將會更深入製作寶石能力等道具系統。（敬請期待）</h5>
<br>
<p><b><i class="fa fa-user w3-margin-right"></i>「販賣戰利品，及道具系統」(其一例子)</b></p>
<img src="pictures\portfolio_sub_page\project_3\selling_item.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="「販賣戰利品，及道具系統」(其一例子)" width="600" height="500">
<br>
</div>
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class="w3-center w3-myfont"> <b> 五) 「近戰攻擊」</b></h4>
<br> <h5 class=" w3-myfont">
<h5 class=" w3-myfont"> ● 里程碑［二十二］所屬 </h5>
<h5 class=" w3-myfont"> ● 是本作一個象徵之一，是多款同類遊戲都沒有的玩法。</h5>
<h5 class=" w3-myfont"> ● 使用技能將自己的戰機轉成近戰模式攻擊敵機，而自己不受傷害。 </h5>
<br>
<p><b><i class="fa fa-user w3-margin-right"></i> 「近戰攻擊」(其一例子)</b></p>
<img src="pictures\portfolio_sub_page\project_3\close_combat.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="「近戰攻擊」(其一例子)" width="600" height="500">
<br>
</div>
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class="w3-center w3-myfont"> <b> 五) 「全屏攻擊」</b></h4>
<br> <h5 class=" w3-myfont">
<h5 class=" w3-myfont"> ● 里程碑［三十］所屬 </h5>
<h5 class=" w3-myfont"> ● 是本作一個象徵之一，是多款同類遊戲都沒有的玩法。</h5>
<h5 class=" w3-myfont"> ● 使用技能召喚隕石及其他全屏攻擊；自己施放的技能，並不會波及到自己。 </h5>
<br>
<p><b><i class="fa fa-user w3-margin-right"></i> 「全屏攻擊」(其一例子)</b></p>
<img src="pictures\portfolio_sub_page\project_3\fullscreen_attack.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="「全屏攻擊」(其一例子)" width="600" height="500">
<br>
</div>
<hr>
</div>
<hr>
<h4 class="w3-center w3-myfont">【介面說明——操作教學指引】 (Tutorial and Keymapping)</h4>
<div class="w3-row">
<div class="w3-half w3-center w3-hide-small w3-padding-large">
<h4 class=" w3-center w3-myfont"> <b> 一) 「介面說明 及 玩家資訊」</b></h4>
<br>
<h5 class=" w3-myfont"> ● A區：玩家生命（紅）及經驗等級值（綠）；及集卡冊按鈕 </h5>
<h5 class=" w3-myfont"> ● B區：玩家金錢餘額；技能冷卻／持續時間；寵物等級／攻擊資訊 </h5>
<h5 class=" w3-myfont"> ● C區：玩家擁有的現化匙數量；敵方餘下血量 </h5>
<h5 class=" w3-myfont"> ● D區：玩家回血（Ｏ鍵）／幸運（Ｐ鍵）物品餘下量 </h5>
<br>
</div>
<div class="w3-half w3-center w3-hide-small w3-padding-large">
<p><b><i class="fa fa-user w3-margin-right"></i>完整介面 </b></p>
<img src="pictures\portfolio_sub_page\project_3\whole_ui_text.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="完整介面" width="600" height="500">
</div>
</div>
<div class="w3-half w3-center w3-hide-small w3-padding-large">
<p><b><i class="fa fa-user w3-margin-right"></i> A區介面</b></p>
<img src="pictures\portfolio_sub_page\project_3\ui_a.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="A區介面" width="600" height="500">
<br>
<p><b><i class="fa fa-user w3-margin-right"></i> B區介面</b></p>
<img src="pictures\portfolio_sub_page\project_3\ui_b.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="B區介面" width="600" height="500">
</div>
<div class="w3-half w3-center w3-hide-small w3-padding-large">
<p><b><i class="fa fa-user w3-margin-right"></i> C區介面</b></p>
<img src="pictures\portfolio_sub_page\project_3\ui_c.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="B區介面" width="600" height="500">
<br>
<p><b><i class="fa fa-user w3-margin-right"></i> D區介面</b></p>
<img src="pictures\portfolio_sub_page\project_3\ui_d.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="B區介面" width="600" height="500">
</div>
</div>
</div>
<div class="w3-row">
<br>
<hr>
<h4 class="w3-center w3-myfont"> <b> 二) 「操作說明」</b></h4>
<br>
<div class = "w3-center">
<img src="pictures\portfolio_sub_page\project_3\proj3_controlmethod.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off w3-center" alt="操作說明（圖例）" width="600" height="500">
</div>
<br>
<br>
<div class="w3-row w3-myfont">
<div class="w3-third w3-container w3-myfont">
<h4 class="w3-center w3-myfont">【控制 / 攻撃 類】</h4>
<h5 class="w3-center w3-myfont"> ● 方向鍵 -- 玩家移動</h5>
<h5 class="w3-center w3-myfont"> ● (按著) 空白鍵 -- (持續地) 普通 攻擊</h5>
<h5 class="w3-center w3-myfont"> ● 按著 Shift 鍵 -- 蓄氣 攻擊</h5>
</div>
<div class="w3-third w3-container w3-myfont">
<h4 class="w3-center w3-myfont">【卡片現化類及黃金粉】</h4>
<h6 class="w3-center w3-myfont"> ＊ 指英文字符上方的數字數字鍵，而非九官格內的。</h6>
<h5 class="w3-center w3-myfont"> ● 數字鍵 1 -- 現化 寶石 卡片</h5>
<h5 class="w3-center w3-myfont"> ● 數字鍵 2 -- 現化 道具 卡片 </h5>
<h5 class="w3-center w3-myfont"> ● 數字鍵 3 -- 現化 服飾 卡片 </h5>
<h5 class="w3-center w3-myfont"> ● 數字鍵 4 -- 現化 房屋 卡片 </h5>
<h5 class="w3-center w3-myfont"> ● 數字鍵 5 -- 現化 寵物 卡片 </h5>
<h5 class="w3-center w3-myfont"> ● 數字鍵 6 -- 現化 SP點數 卡片 </h5>
<h5 class="w3-center w3-myfont"> ● 數字鍵 7 -- 現化 黃金粉 </h5>
<h5 class="w3-center w3-myfont"> ● ` / ~ (Grave鍵) -- 購買現化鑰匙 </h5>
</div>
<div class="w3-third w3-container w3-myfont">
<h4 class="w3-center w3-myfont">【道具系統 / 雜項】</h4>
<h5 class="w3-center w3-myfont"> ● Q 鍵 -- 賣出寶石 </h5>
<h5 class="w3-center w3-myfont"> ● P 鍵 -- 回血道具 </h5>
<h5 class="w3-center w3-myfont"> ● O 鍵 -- 幸運道具</h5>
</div>
</div>
</div>
<div class="bgimg-4 w3-display-container w3-opacity-min" id="home"></div>
<div class="w3-center">
<h3 class="w3-center w3-myfont" id="proj4_intro">【專案發行】</h3>
<h3 class="w3-center w3-myfont">Output Product </h3>
<hr>
<h4 class=" w3-myfont"> 【里程碑紀錄的主旨、用意】 </h4>
<h5 class=" w3-myfont"> 【立論】<br>
<h6 class=" w3-myfont"> ● 網上有為數不少的網民都談論到，製作此類型的微型作品。</h6>
<h6 class=" w3-myfont"> ● 但多時都是口講做，而沒有實質開始過。</h6>
<h6 class=" w3-myfont"> ● 或是有開始過做，以「缺少編程、建模、設計、遊戲開發的專門技能」為因。故無功而逝、胎死腹中。 </h6>
<br>
<br>
<h5 class=" w3-myfont"> 【主旨/用意】 </h5>
<h6 class=" w3-myfont"> ● 希望持續地製作一些小/微型作品，去獲得少許在遊戲業界的「肯定」、「建樹」。</h6>
<h6 class=" w3-myfont"> ● 證明有潛在觀眾注視專案的發展。 </h6>
<br>
<hr>
<h4 class="w3-center w3-myfont">【發行方法】</h4>
<h5 class=" w3-myfont"> ● 作者 GitHub 下載作品 </h5>
<br>
<a href="https://github.com/nelsonlan/nana_3rdtest_release" class="buttonstyle_two">前往 下載作品 Go</a>
<br>
<br>
<h5 class=" w3-myfont"> ● 作者 Youtube Channel </h5>
<br>
<a href="https://www.youtube.com/playlist?list=PL9zygzz0hZalVlwxz9AsujtsrcMJpAP6S" class="buttonstyle_two">前往 作者 Youtube Channel</a>
<br>
<br>
<h5 class=" w3-myfont"> ● 所有已批准作者提出宣傳版務的論壇 </h5>
<h5 class=" w3-myfont"> ● 第三者分享的任何合法，專重應有版權的渠道 </h5>
<br>
<div class="w3-content w3-padding-8 w3-myfont" >
<br><hr>
<h2 class="w3-center"> 【發行成效/回饋/回應】</h2>
<h2 class="w3-center"> Youtube viewer feedback and effectiveness. </h2>
<br>
<a href="feedback.html" class="buttonstyle_two">前往 專案三 意見回饋牆</a>
<br>
</div>
<h4 class="w3-center w3-myfont"></h4>
<div class="w3-row">
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class=" w3-center w3-myfont"> <b> 【支持類】</b></h4>
<br>
<h5 class=" w3-myfont">
<h5 class=" w3-myfont"> ● 不少觀眾無論有否訂閱、長期收看都支持專案發展。 </h5>
<h5 class=" w3-myfont"> ● 不同地區的人也有，更有慕名而來者。 </h5>
<br>
<!--<img src="pictures\portfolio_sub_page\project_3\selling_item.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="觀眾的回饋/回應(1.1)" width="600" height="500">
--><br>
</div>
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class="w3-center w3-myfont"> <b> 【建議類】</b></h4>
<br> <h5 class=" w3-myfont">
<h5 class=" w3-myfont"> ● 觀眾都留下以往原作不同的回憶、建議下一里程碑的更新可朝哪個方向發展。 </h5>
<h5 class=" w3-myfont"> ● 代表作者很注重觀眾、和原作的「還原」。</h5>
<br>
<!--<img src="pictures\portfolio_sub_page\project_3\close_combat.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="觀眾的回饋/回應(2.1)" width="600" height="500">
--><br>
</div>
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class="w3-center w3-myfont"> <b> 【其他類】</b></h4>
<br> <h5 class=" w3-myfont">
<h5 class=" w3-myfont"> ● 一些我不懂分什麼類，總知就是支持。 </h5>
<br>
<!--<img src="pictures\portfolio_sub_page\project_3\fullscreen_attack.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="觀眾的回饋/回應(3.1)" width="600" height="500">
--><br>
</div>
<hr>
</div>
</div>
</section>
<!-- ==========================================-->
<!--
<hr>
<h4 class="w3-center w3-myfont">【專案發行效益／益助】</h4>
<h5 class=" w3-myfont"> ● 所有已批准作者提出宣傳版務的論壇 </h5>
<hr>-->
<div class="w3-row w3-center w3-dark-grey w3-padding-16 w3-myfont">
<h5 class="w3-center w3-myfont"> 數值截至 2019 年 5 月 </h5>
<div class="w3-quarter w3-section"> <span class="w3-xlarge">6 K+</span><br>
Youtube Channel 觀看次數<br>
Youtube Channel Unique Visitors</div>
<div class="w3-quarter w3-section"> <span class="w3-xlarge">300+ </span><br>
Youtube Channel <br>帶來的喜歡／回應<br>
Youtube Channel Likes, Comments </div>
<div class="w3-quarter w3-section"> <span class="w3-xlarge">600 + </span><br>
論壇宣傳帶來的流量 (觀看次數)*<br>
Fourm Visitors*</div>
<div class="w3-quarter w3-section"> <span class="w3-xlarge">600 + </span><br>
GitHub帶來的流量 (觀看次數)*<br>
GitHub Visitors*</div>
<br>
* Data obtained by big data analysis tools.
</div>
<div class="w3-row w3-center w3-dark-grey w3-padding-16 w3-myfont">
<div class="w3-half w3-section"> <span class="w3-xlarge"> HKD $ 0.9K </span><br>
專案帶來的收益／支助額<br>
Received Sponsor from Youtube / 3rd platform (steamlab...etc).
</div>
</div>
<br>
</div>
<div class="w3-row w3-center w3-dark-grey w3-padding-16">
<div class="w3-third w3-section w3-myfont"> <span class="w3-large">
<br>
前往 圖片 (靜態) 作品示例
<br>
Picture archive
<br>
<br>
<a href="media_archive.html#galleries" class="buttonstyle_two">前往 圖片示例 Go</a>
</div>
<div class="w3-third w3-section w3-myfont"> <span class="w3-xlarge">
【專案三】 <br>
回憶重現、模仿、參考改編
<div class=" w3-section w3-myfont"> <span class="w3-small">
文案企劃
<br>
Documentation<br>
<br>
<a href="https://drive.google.com/open?id=1lvwKKWxp-SK12smONjDEvKI21k0ukUoZ" class="buttonstyle_two">前往 文案 Go</a>
</div>
</div>
<div class="w3-third w3-section w3-myfont"> <span class="w3-large">
<br>
前往 實質作品 示例
<br>
Game Demo
<br>
<br>
<a href="https://github.com/nelsonlan/nana_3rdtest_release" class="buttonstyle_two">前往 下載作品 Go</a>
<!--<a href="#" class="w3-button w3-light-grey"></a>-->
</div>
</div>
<br>
<!-- Modal for full size images on click-->
<div id="modal01" class="w3-modal w3-black" onClick="this.style.display='none'"> <span class="w3-button w3-large w3-black w3-display-topright" title="Close Modal Image"><i class="fa fa-remove"></i></span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64"> <img id="img01" class="w3-image">
<p id="caption" class="w3-opacity w3-large"></p>
</div>
</div>
<footer class="w3-center w3-black w3-padding-64 w3-opacity w3-hover-opacity-off"> <a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
<div class="w3-xlarge w3-section"> <a href="https://drive.google.com/open?id=1x5gO8Dmfox_wXYIrENMOVmvkefmgbh1B"><i class="fa fa-google w3-hover-opacity" style="font-size:36px";></i></a> <a href="https://www.youtube.com/user/bbbgbg"><i class="fa fa-youtube-play w3-hover-opacity" style="font-size:36px";></i></a> <a href="https://github.com/NelsonLAN"><i class="fa fa-github w3-hover-opacity" style="font-size:36px";></i></a> <a href="https://www.linkedin.com/in/nelsonlan574211143"><i class="fa fa-linkedin w3-hover-opacity" style="font-size:36px";></i></a> </div>
You are visitor<div align="center"><iframe src="https://profile-counter.glitch.me/nelsonlan01/count.svg" height="100" style="border:none;" style="text-align:center;"></iframe></div>
<p> </p>
<p> © 版權屬 Nelson LAN 所有 (2012 - 2023)</p>
<p> © Copyright belong to NelsonLAN (2012 - 2023) </p>
</footer>
<!-- Footer -->
<script>
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
// Change style of navbar on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
var navbar = document.getElementById("myNavbar");
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white";
} else {
navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-white", "");
}
}
// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html></body>
</html>