top of page

Pixel Journey

 

在Git Hub上在线体验这款游戏  Pixel Journey

Pixel Journey 是用Javascript和HTML语言做出的一款横版卷轴跑酷游戏,该游戏是使用最新的Javascript语言构建的,并非每个网络浏览器都支持该语言,建议在Chrome上玩Pixel Journey。

 

关于Pixel Journey

 

项目背景

当在PS4上首次发行游戏《 Journey》时,我一直是它的忠实拥护者,所以我决定以我最喜欢的像素风格重新制作该游戏。

Challenge & Outcome

我没有任何Web开发的背景,编码语言对我来说是一个新的挑战,这是我第一次从零开始构建自己的游戏。在这个为期一个月的项目中,我学习了制作简单游戏的整个流程并掌握了基本的Javascript、HTML和Phaser 的交互原型制作技能。


My role

这是一项独立的游戏制作,我设计了游戏玩法,完成了包括角色动画、背景等在内的美术原型,并用代码开发了可玩的演示。

 

01 Game play

玩家如何投入到游戏当中?

游戏机制是什么?

 

02 Game art

视觉风格如何反映在原始的

《 Journey》游戏上? 玩家如何看待这个游戏世界?

03 Development

思考如何将游戏资源实现代码化并做成有可玩性的演示

01_02.png
pixel_paint_palette_by_max2809_d6u2ff2-f
flat,750x,075,f-pad,750x1000,f8f8f8.png

01 Game play

 

在这个类似Flappy Bird的游戏中,玩家需要使用鼠标左键控制跑步的角色以避免障碍物或地面。随着时间的流逝,速度会更快。游戏的目标是达到更高的分数。

Journey-cover.png

02 Game art

 
 

人物设计

作为Original Journey 的粉丝,我参考了游戏中原本的人物设计,并将他 2D 像素化。我设计了人物静态和跑动的姿态,并将它们动画化。

 
截屏2020-11-23 00.45.14.png
未标题-1.png
running.gif
charcter.gif

元素设计

我采用了原本游戏中出现的敌人——一种机械和怪物的混合体,作为游戏中出现的障碍。此外,游戏中出现的墓碑状的标志作为地面障碍来为游戏增加难度。

 
截屏2020-11-24 23.56.41.png
截屏2020-11-24 23.56.41.png
截屏2020-11-24 23.56.41.png
截屏2020-11-24 23.57.00.png
截屏2020-11-24 23.57.24.png
截屏2020-11-25 00.11.28.png
ribbon1.gif
dragon-loop.gif

场景设计

我采用了原本journey中那极具美感的沙漠作为游戏的启动场景。我参考了游戏中出现的被沙漠侵蚀的建筑和一些城市的遗迹作为游戏场景,来体现原作的荒凉感。

截屏2020-11-25 00.17.05.png
截屏2020-11-25 00.16.38.png
Journey-PC.jpg
截屏2020-11-25 15.23.15.png
截屏2020-11-25 00.10.53.png
scene2.gif
Journey2.png
截屏2020-11-25 00.28.47.png

03 Development

 

我使用Phaser 3作为我的游戏引擎来更高效的编写我的游戏程序。我将游戏分成四个场景,并定义每个场景玩家与游戏交互的方式,思考如何用界面和元素来引导玩家和显示信息。

develop.png
截屏2020-11-26 00.01.08.png

code from Pixel Journey

unnamed (2).png

Download program

 

如果你对这个游戏的代码感兴趣,你可以在github上找到它,欢迎你来帮我完善这款游戏。

 
 

© designed and coded by Jianwei Zhang

bottom of page