The Secret of Shan Hai Jing
Shan Hai Jing Creatures Research 51
The Secret of Shan Hai Jing
Shan Hai Jing Creatures Research 52
The Secret of Shan Hai Jing
Shan Hai Jing Creatures Research 53
The Secret of Shan Hai Jing
Shan Hai Jing Creatures Research 54
The Secret of Shan Hai Jing
Shan Hai Jing Creatures Research 55
The Secret of Shan Hai Jing
Shan Hai Jing Creatures Research 56
The Secret of Shan Hai Jing
Project Development
Card Design
YuNiao Lei CongLong
Three Card Variations 57
Project Development
The Secret of Shan Hai Jing
Art Style Survey Result
There are 35 responses. 68.6% of the respondents choose the first one. The reason
mostly thinks it is a unique, cute and suitable colour used.
First Choice
Project Development 58
The Secret of Shan Hai Jing
Sketches
After deciding on the art style, I started designing each creature. Before
designing the creatures, I found the references online and sketched them on
paper. In the process, I got inspired and gained ideas for my design.
For the special cards, I also found references from other board games and got
references for the icons.
Project Development 59
The Secret of Shan Hai Jing
Project Development 60
The Secret of Shan Hai Jing
Prototype
After the sketching, I created the design for the card’s back and
the layout of text and elements for the card’s face.
Project Development 61
The Secret of Shan Hai Jing
Map Design
Three Map Variations 62
Project Development
The Secret of Shan Hai Jing
Updating
The first design was chosen and continued to
develop by adding more points and paths.
The colour was added to distinguish the area of the lands and make
it easier to match the cards’ locations.
Project Development 63
The Secret of Shan Hai Jing
AR Quiz
ZapWorks was used to create the AR quiz.
Project Development 64
The Secret of Shan Hai Jing
Map AR
Cinema 4D was used to create the 3D model
Project Development 65
The Secret of Shan Hai Jing
Unity was used to create the Map AR experience.
The water texture was created using assets from Unity.
Project Development 66
The Secret of Shan Hai Jing
Game Room
Flowchart
The connection and the pages of the game
rooom are shown with this flowchart.
Project Development 67
The Secret of Shan Hai Jing
Wireframe
The wireframe of the game room showing the
layout of each interface.
Scan QR code Number of Player Nickname
Players
Dashboard Special Card Remove Card Add Card
Project Development 68
The Secret of Shan Hai Jing
Adobe XD was used to create the game room
interface and simulation.
Project Development 69
The Secret of Shan Hai Jing
Board Game Set
The card holder and deck holder was created using card board
and mounting board respectively.
Card Holder
Project Development 70
The Secret of Shan Hai Jing
Card Deck Holder 71
Project Development
The Secret of Shan Hai Jing
HOW TO PLAY Video
The whole board game set 3D model was created in Cinema 4D.
The animation was done and recorded in Cinema 4D as a resources
for video editing in After Effects
Project Development 72
The Secret of Shan Hai Jing
Deliverables
Logo
Primary Version
The small seal script font was used as the primary font of the logo. It shows the classiness
of Shan Hai Jing, but the rounded corner makes it more friendly and not too serious.
The left side is designed to resemble the map using the elements of the map, such as
'STAR' and the dotted line.
Resemble with the Small Seal Script (
map, with the element
of ‘STAR’ point and the
dot line as the path
Baloo Bhaina Bold
Secondary Version
The word can be used separately. It can be used as a logomark for smaller
prints or as a minor touchpoint for a design.
Deliverables 73
The Secret of Shan Hai Jing
Typography
The rounded font was used to show the friendliness of the board game. The primary
font for the heading is bold to attract attention. While the lighter font is used for body
text, it mainly focuses on readability.
The Chinese font is a decorative font used for the names of the creatures on the
cards. The font's sharpness and freeness show the state of the creatures, which is
unfettered and free.
Primary Font/Heading
Baloo Bhaina SemiBold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Secondary Font/ Body Text
Baloo Bhaina Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Chinese Font
飞鸟逍遥手书
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Deliverables 74
The Secret of Shan Hai Jing
Card Design
Back
The colour is based on the colour of the direction of ‘Five elements’
East South West North Center
Front
With the creature’s illustration, the icon on the top right corner,
and the name at the bottom
Icon
“Five Elements“( ): Fire ( ),
Water ( ), Wood ( ), Metal or
Gold ( ), and Earth or Soil ( ).
Creature Name
Deliverables 75
The Secret of Shan Hai Jing
South
Deliverables 76
The Secret of Shan Hai Jing
West
Deliverables 77
The Secret of Shan Hai Jing
North
Deliverables 78
The Secret of Shan Hai Jing
East & Center
Deliverables 79
The Secret of Shan Hai Jing
Special Card
Follow the instruction when getting this card.
Deliverables 80
The Secret of Shan Hai Jing
Map Design
Question Mark
Take a Special Card
Deliverables Star
Take one creature card based
on the location, scan and
answer the quiz.
81
The Secret of Shan Hai Jing
The size was readjusted to make it able to separate into six equal portions of
puzzle pieces. And the lines were drawn to cut when printed out.
Deliverables 82
The Secret of Shan Hai Jing
AR Quiz
Players need to scan and answer the quiz correctly to get the card.
To let the players see the question and the options clearly, a dark overlay
background was used to cover the cards and make them cleaner. .
Deliverables 83
The Secret of Shan Hai Jing
Description
Multiple Choices
Question
Animals Video
Correct Wrong
Deliverables 84
The Secret of Shan Hai Jing
Map AR
Scan the map piece to explore the 3D mountain and sea.
Deliverables 85
The Secret of Shan Hai Jing
Game Room
Enter the game room by scanning the QR Code at the back of the cover.
Simulation Link:
https://xd.adobe.com/view/0bccb13a-6a4b-4afa-bd81-f1f35f0c98b9-5e9f/?fullscreen
Number of Player Nickname Dashboard
Players
Special Card Remove Card Add Card
Deliverables 86
The Secret of Shan Hai Jing
Number of
cards get for
each element
Other players’ Scan QR code
number of cards
Dashboard
Deliverables 87
The Secret of Shan Hai Jing
Board Game Set
The set including the case, the map, the card deck holder, cards (64 creature
cards + 15 special cards), four card holders, four pawns and two dice.
Deliverables 88
The Secret of Shan Hai Jing
Videos
HOW TO PLAY
This video shows the players the rule of the board game. It contains video shooting, 3D
animation created in Cinema 4D and 2D animation created in After Effects.
Youtube Link: https://youtu.be/hSwMJfZOIUE
Deliverables 89
The Secret of Shan Hai Jing
Videos
PROMO
This video is to promote the board game. This video concludes the most exciting part of
this board game, including the illustration, animation and AR.
Youtube Link: https://youtu.be/cwgrL0Atyoo
Deliverables 90
The Secret of Shan Hai Jing
Videos
INTRO
This video introduces the theme of this project and shows all of the deliver-
ables of this project. There are also comments from the players and the
behind the scene of this project.
Youtube Link: https://youtu.be/mXvndWktmBA
Deliverables 91
The Secret of Shan Hai Jing
Budget
Budget 92
The Secret of Shan Hai Jing
Gantt Chart
Gantt Chart 93
The Secret of Shan Hai Jing
Reflection
For the first part of the project, I have to research deeply to
fully understand Shan Hai Jing and also the secret behind
Shan Hai Jing. This is not the first time I heard about it.
However, when I started researching it, I realised it was not
the same as I thought. Furthermore, when I began study-
ing biodiversity, there were so many scientific words that I
could not understand. So it took more time for me to
search for the definition and write it out using easier words.
When I started the design, I could not imagine how will the
final product be like. Every step looked so small that when
I finished one of the designs, I felt like I had just done the
first part. Since this project is a combination of different
elements, different software is used, and it gave me a
chance to explore more on the areas I have never tried
before. As I explored further, watching more online tutori-
als, I found more techniques or tips on the software I have
used these few years.
The process is not easy at all. Time has become the most
precious thing for me. I felt like I have been chasing by the
time these few months. I knew that, based on my skills, I
would be unable to finish it very fast. It took time and effort
to make the adjustment and amendment. However, with
the help of people around me, I managed to do it on time,
and I am thankful for all the kindness.
In conclusion, this is my final major project as a Multimedia
Design student. There are good and bad in the project, but
I think the effort and time are worth with this project.
Reflection 94
The Secret of Shan Hai Jing
References
Chen, X. (2017, May). Scientific Consciousness and Exploration Spirit in Shan Hai Jing. In
2017 4th International Conference on Education, Management and Computing Tech-
nology (ICEMCT 2017) (pp. 235-239). Atlantis Press.
Xiaolin, W. A. N. G. (2008). : : Tradition-
al Chinese Medicine: Its Naturalist Viewpoints and Ethical Implications in the Case of
the Sanhaijing. International Journal of Chinese & Comparative Philosophy of Medicine,
6(2), 75-90.
Liu, S. (2018). The Zhuan Xu People were the Founders of Sanxingdui. Culture and Ear-
liest Inhabitants of South Asi, 3-18.
Gesterkamp, L. (2021). The Shanhai jing and the Origins of Daoist Sacred Geography.
Journal of Daoist Studies, 14(14), 21-54.
Jiaying, Z. (2010). Shanhaijing:A Comprehensive Survey of The Eastern Communities in
Ancient China. Beijing: University of International Business and Economics Press.
Mallon, D., Kümpel, N., Quinn, A., Shurter, S., Lukas, J., Hart, J. A., ... & Maisels, F. (2015).
Okapia johnstoni. The IUCN Red List of Threatened Species 2015: e. T15188A51140517.
Chapin Iii, F. S., Zavaleta, E. S., Eviner, V. T., Naylor, R. L., Vitousek, P. M., Reynolds, H. L.,
... & Díaz, S. (2000). Consequences of changing biodiversity. Nature, 405(6783), 234-242.
Srivastava, D. S., & Vellend, M. (2005). Biodiversity-ecosystem function research: is it
relevant to conservation?. Annu. Rev. Ecol. Evol. Syst., 36, 267-294.
Sandifer, P. A., Sutton-Grier, A. E., & Ward, B. P. (2015). Exploring connections among
nature, biodiversity, ecosystem services, and human health and well-being: Opportu-
nities to enhance health and biodiversity conservation. Ecosystem services, 12, 1-15.
Tilman, D., Clark, M., Williams, D. R., Kimmel, K., Polasky, S., & Packer, C. (2017). Future
threats to biodiversity and pathways to their prevention. Nature, 546(7656), 73-81.
Díaz, S., Fargione, J., Chapin III, F. S., & Tilman, D. (2006). Biodiversity loss threatens
human well-being. PLoS biology, 4(8), e277.
Gaston, K. J. (2005). Biodiversity and extinction: species and people. Progress in Physi-
cal Geography, 29(2), 239-247.
Ehrlich, P. R., & Daily, G. C. (1993). Population extinction and saving biodiversity. Ambio,
64-68.
References 95
The Secret of Shan Hai Jing
Caro, T., & Sherman, P. W. (2011). Endangered species and a threatened discipline:
behavioural ecology. Trends in Ecology & Evolution, 26(3), 111-118.
Pimm, S. L., Russell, G. J., Gittleman, J. L., & Brooks, T. M. (1995). The future of biodiversi-
ty. Science, 269(5222), 347-350.
Nincarean, D., Alia, M. B., Halim, N. D. A., & Rahman, M. H. A. (2013). Mobile augmented
reality: The potential for education. Procedia-social and behavioral sciences, 103,
657-664.
Meekaew, N., & Ketpichainarong, W. (2018, July). An augmented reality to support
mobile game-based learning in science museum on biodiversity. In 2018 7th Interna-
tional Congress on Advanced Applied Informatics (IIAI-AAI) (pp. 250-255). IEEE.
Ređep, T., & Hajdin, G. (2021). Use of Augmented Reality with Game Elements in Educa-
tion–Literature Review. Journal of Information and Organizational Sciences, 45(2),
473-494.
Lee, H. S., & Lee, J. W. (2008, June). Mathematical education game based on augment-
ed reality. In International conference on technologies for e-learning and digital enter-
tainment (pp. 442-450). Springer, Berlin, Heidelberg.
Omar, M., Ali, D., Mokhtar, M., Zaid, N., Jambari, H., & Ibrahim, N. (2019). Effects of Mobile
Augmented Reality (MAR) towards students' visualisation skills when learning
orthographic projection. International Journal of Emerging Technologies in Learning
(iJET), 14(20), 106-119.
Costa, M. C., Manso, A., & Patrício, J. (2020). Design of a mobile augmented reality plat-
form with game-based learning purposes. Information, 11(3), 127.
Jamali, S. S., Shiratuddin, M. F., & Wong, K. W. (2013). A review of augmented reality (AR)
and mobile-augmented reality (mAR) technology: Learning in tertiary education.
Learning in Higher Education, 20(2), 37-54.
Markouzis, D., & Fessakis, G. (2015, November). Interactive storytelling and mobile aug-
mented reality applications for learning and entertainment—a rapid prototyping per-
spective. In 2015 International Conference on Interactive Mobile Communication Tech-
nologies and Learning (IMCL) (pp. 4-8). IEEE.
Laine, T. H., & Suk, H. (2019). Designing educational mobile augmented reality games
using motivators and disturbance factors. In Augmented reality games II (pp. 33-56).
Springer, Cham.
Sandbrook, C., Adams, W. M., & Monteferri, B. (2015). Digital games and biodiversity
conservation. Conservation Letters, 8(2), 118-124.
References 96
The Secret of Shan Hai Jing
Eisenack, K. (2013). A climate change board game for interdisciplinary communication
and education. Simulation & Gaming, 44(2-3), 328-348.
Mostowfi, S., Mamaghani, N. K., & Khorramar, M. (2016). Designing Playful Learning by
Using Educational Board Game for Children in the Age Range of 7-12:(A Case Study:
Recycling and Waste Separation Education Board Game). International Journal of Envi-
ronmental and Science Education, 11(12), 5453-5476.
I —— . (n.d.). Retrieved
from tongyou.la: http://www.tongyou.la/article.php?id=19907
About us. (n.d.). Retrieved from FLEX NBA: https://flexnba.com/pages/flex-nba-re-
fresh
Evolution: Climate. (2016). Retrieved from BoardGameGeek: https://boardgame-
geek.com/boardgame/182134/evolution-climate
HappyGiant, T. S. (4 May, 2016). HoloGrid: Monster Battle (Augmented Reality Board
Game). Retrieved from KICKSTARTER: https://www.kickstarter.com/projects/holog-
rid/hologrid-monster-battle-augmented-reality-board-ga
North Star Games Evolution: Climate Stand-Alone Board Game - Every Game
Becomes a Different Adventure! (n.d.). Retrieved from AMAZON: https://www.ama-
zon.com/North-Star-Games-520NSG-Evolution/dp/B01MAZ8MPX?th=1
Sequoia Games, I. (11 May, 2021). Flex NBA | An AR board game that brings pro sports
to life. Retrieved from KICKSTARTER: https://www.kickstarter.com/projects/flexn-
ba/the-worlds-first-pro-sports-ar-board-game/posts
TOI Travel Around the World board game. (n.d.). Retrieved from TOI WORLD: http://w-
ww.toiworld.com/product/toi-travel-around-the-world-board-game.html
TOI . (n.d.). Retrieved
from : https://shop15348063.m.youzan.com/wscgoods/detail/2otzk-
zwhrth7r?from_source=gbox_seo
Travel Around the World Board Games TOI. (n.d.). Retrieved from Asia Society Hong
K o n g : h t t p s : // s h o p . a s i a s o c i e t y . o r g . h k / p r o d u c t s / t r a v -
el-around-the-world-board-games
Augmented reality. (n.d.). Retrieved from Unity: https://unity.com/unity/features/ar
CARTER, R. (28 December, 2021). What is Augmented Reality? An Introduction to AR
Tech. Retrieved from XR Today: https://www.xrtoday.com/augmented-reali-
ty/what-is-augmented-reality/
References 97
The Secret of Shan Hai Jing
Getting Started with Vuforia Engine in Unity. (n.d.). Retrieved from Vuforia: https://li-
brary.vuforia.com/getting-started/getting-started-vuforia-engine-unity
Greene, J. W. (10 August, 2018). Creating Mobile Augmented Reality Experiences in
Unity. Retrieved from Programming Historian: https://programminghistorian.org/en/-
lessons/creating-mobile-augmented-reality-experiences-in-unity
Gupton, N. (21 September, 2017). WHAT’S THE DIFFERENCE BETWEEN AR, VR, AND
MR? Retrieved from The Franklin Institute: https://www.fi.edu/difference-be-
tween-ar-vr-and-mr
Senum, D. (n.d.). How to Make an Augmented Reality App with Vuforia and Unity3D.
Retrieved from Jasoren: https://jasoren.com/making-an-ar-app-with-vufo-
ria-and-unity3d/
Talbert, L. (8 September, 2020). Unity and Augmented Reality. Retrieved from redgate:
h t t p s : // w w w. r e d - g a t e . c o m /s i m p l e - t a l k /d e v e l o p m e n t /d o t n e t - d e v e l -
opment/unity-and-augmented-reality/
THE SCIENCE OF AUGMENTED REALITY. (n.d.). Retrieved from The Franklin Institute:
https://www.fi.edu/science-of-augmented-reality
Welcome to Unity. (n.d.). Retrieved from Unity: https://unity.com/our-company
WHAT IS AUGMENTED REALITY? (n.d.). Retrieved from The Franklin Institute:
https://www.fi.edu/what-is-augmented-reality
What is LiDAR, How it Works and How it's Being Used in 2021. (17 March, 2021).
Retrieved from Circuit Stream: https://circuitstream.com/blog/what-is-lidar/
Cards, V. P. (n.d.). King Star Zhao Yang Playing Cards, “Cloud / Sea series:
After Story” (9 Tailed Fox – Black), MPC, limited edition of 1188, numbered on bottom,
UV technology, pearlescent premium paper. Retrieved from Vedicpokercards:
h t t p s : // v e d i c p o k e r c a r d s . c o m / p r o -
duct/king-star-%E6%98%AD%E9%98%B3-zhao-yang-playing-cards-%E4%BA%91%E6
%A2%A6%E5%B1%B1%E6%B5%B7-cloud-sea-series-after-story-9-tailed-fox-black-m
pc-limited-edition-of-1188-numbered-on-bottom/?v=75dfaed2dded
. (2020, June 23). “” . Retrieved from
ZCOOL: https://m.zcool.com.cn/work/ZNDU3MTQ2NTI=.html
References 98