-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog_details_project_setup.html
289 lines (247 loc) · 19.7 KB
/
blog_details_project_setup.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
<!doctype html>
<html class="no-js" lang="zxx">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>栗 KURI 栗 team's website</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="assets/kuri photos/BW-darkx150px.ico">
<!-- CSS here -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/slicknav.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/css/themify-icons.css">
<link rel="stylesheet" href="assets/css/slick.css">
<link rel="stylesheet" href="assets/css/nice-select.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/kuri_style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<!-- Preloader Start -->
<div id="preloader-active">
<div class="preloader d-flex align-items-center justify-content-center">
<div class="preloader-inner position-relative">
<div class="preloader-circle"></div>
<div class="preloader-img pere-text">
<img style="width: 35px; height: 35px;" src="assets/img/kuri photos/Kuri_BW-light.ico" alt="">
</div>
</div>
</div>
</div>
<!-- Preloader Start -->
<header>
<!-- Header Start -->
<div class="header-area header-transparent">
<div class="main-header">
<div class="header-bottom header-sticky">
<div class="container-fluid">
<div class="row align-items-center">
<!-- Logo -->
<div class="col-xl-2 col-lg-1 col-md-1">
<div class="logo">
<a href="index.html"><img style="width: 273px; height: 150px;" src="assets/img/kuri photos/Inline Logo BW-lightx150px.png" alt=""></a>
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-8">
<!-- Main-menu -->
<div class="main-menu f-right d-none d-lg-block">
<nav>
<ul id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="blog.html">Blogs</a>
<!-- <ul class="submenu">
</ul> -->
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
<!-- Mobile Menu -->
<div class="col-12">
<div class="mobile_menu d-block d-lg-none"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Header End -->
</header>
<main>
<!-- Hero Start-->
<div class="slider-area slider-bg ">
<div class="single-slider d-flex align-items-center slider-height2 ">
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="hero-cap text-center pt-50">
<h2>Project Setup</h2>
</div>
</div>
</div>
</div>
</div>
<!-- Slider Shape -->
<div class="slider-shape d-none d-lg-block">
<img class="slider-shape1" src="assets/img/hero/top-left-shape.png" alt="">
<img class="slider-shape2" src="assets/img/hero/right-top-shape.png" alt="">
<img class="slider-shape3" src="assets/img/hero/left-botom-shape.png" alt="">
</div>
</div>
<!--Hero End -->
<!--================Blog Area =================-->
<section class="blog_area single-post-area section-padding">
<div class="container">
<div class="row">
<div class="col-xl-12 posts-list">
<div class="single-post">
<div class="w3-content w3-display-container">
<img class="mySlides" src="assets/img/blog/project_setup.png" style = "width:100%">
</div>
<div class="blog_details">
<h2>1. Tools
</h2>
<p class="excert">
  We created a Github organization for our team to work together on GitHub, and each of the members’ Github accounts has access to this organization. In the organization account, there are three repositories: one is for the demo of the game, one is for our team website, and the last one is the storage space for other things.
<br><br>  The link to our website: <a class="a1" href="https://kuri-team.github.io">https://kuri-team.github.io</a>
<br>  The link to our Git repository: <a class="a1" href="https://github.com/kuri-team">https://github.com/kuri-team</a>
<br><br>   On GitHub, the audit trail has moderately reflected the Game and Web Development teams’ contribution to this assignment but not for the research and writing group, since they mostly worked outside of GitHub. From our observation, all Kuri team members were very proactive and contributed to the best of their abilities to this assignment.
</p>
<h2>2. Roles
</h2>
<p class="excert">
  For the project, we have defined roles for each member of Kuri.
<br><br>  Mike is the Team Leader who leads the team and oversees the project to make sure that our project is on the right track, and that our goals and aim are achieved. He is also the Lead Game Developer, meaning that he will be in charge of programming and developing the HTML game. We decided that he should have these positions because Mike has great leadership skills, he is the most experienced in the IT field out of all the members, and this is his project idea. Furthermore, Mike is familiar with various languages that can help him develop the game
<br><br>  The next member is Linh, and he is Kuri’s Game Developer and Lead Web Developer. As a Game Developer, he will make and code the game with Mike, while as a Lead Web Developer, he will be making, managing, and overseeing the web development process for our team’s website on GitHub. He will also report back to our Team Manager the progress of his web development team and if there are any issues with the website. Linh is given this position because he is proficient in HTML, CSS, and JavaScript, and he already has experience with web development. He is also familiar with JavaScript, so he will be able to code the game.
<br><br>  Thirdly, since Huy has some experience with HTML, he will be responsible for making and designing our website with Linh; hence, Huy is our team’s Web Developer.
<br><br>  Lastly, Nhi is the Leader of the Research and Writing group and Manh is another member of this group, and their main task is to write, edit, and proofread the final report for our project. They will also do some research about the theories and concepts related to our project, such as game testing. In addition, as the Leader of the Research and Writing group, Nhi will have to update the progress of the project’s report writing and research to the Team Leader, and decide what specific tasks will be completed each week regarding the final report. Nhi and Manh are assigned to this role because they both have a lot of experience with Academic Research and Academic Writing, and Nhi specifically has good management skills, which makes her very fitting for the Lead Writer and Researcher role. Since we only have four weeks for assignment 3 of the course Introduction to IT, we will only make the game; we do not plan to implement the game into RMIT’s network during these four weeks. However, if we want to continue with the project after the assignment, we will have to implement the game into the network, and this will be the main responsibility of Nhi and Manh in the future. Therefore, their future positions will also be Network Administrators if Kuri decides to further pursue this project.
</p>
<h2>3. Tools and Technologies
</h2>
<p class="excert">
  • Game engine: Phaser (<a class="a1" href="https://phaser.io">https://phaser.io</a>) version 3.50.1 “Subaru”. Phaser is a popular and easy-to-learn open-source 2D HTML5 game framework. Mike and Linh are using this framework for the first time, but both already had previous experience with programming in JavaScript
<br><br>  • Languages used: HTML/CSS and JavaScript are used to make the website. Huy, Linh, and Mike all have previous experience with front-end development in these languages.
<br><br>  • Font tool: WebFont Loader version 1.6.26 is used to control and load fonts for our project.
<br><br>  • IDE: Visual Studio Code version 1.5.2 is our choice of IDE for web development. It supports our choices of language to build the website and we can use Git commands with it. As for game development, we use Jetbrains Webstorm 2020 since it mainly supports JavaScript, which is what Phaser needs.
<br><br>  • Sprites and other arts: Aseprite version 1.2.25 for pixel arts (Mike bought the software for his previous projects), Photoshop CC2018, Illustrator CC2018, or other open-source equivalents such as Gimp and Inkscape for more complex raster and vector photo editing capabilities. Mike has previous experience with all of those software applications.
<br><br>  • Sound design: Audacity version 2.1.0 for rudimentary audio editing and Studio One version 4.5.2 (free version) for studio-level-quality audio engineering. Mike has previous experience with both software applications.
<br><br>  • Browser: Google Chrome 87.0 and Firefox 84.0.2 are used for game debugging.
<br><br>  • Version control: Git version 2.30.0 with repository hosted on GitHub (<a class="a1" href="https://github.com">https://github.com</a>). All members of Kuri are proficient in using Git and GitHub.
<br><br>  • Hardware: For initial testing of the game, we will need a sample wi-fi network. This could be the wi-fi network at one of the members’ homes. Back-end components will be overseen by Mike with consultation and collaboration from team TTNC’s leader Dang Vu Thang (S-3879303).
<br><br>  • Permission to access RMIT University Vietnam SGS Campus wireless network hardware. This would be the hardest part of this project due to strict network authorization at RMIT SGS campus. None of Kuri members has knowledge about back-end programming and network administration, so we will need to consult the school leaders and the IT department in this regard.
</p>
<h2>4. Risks
</h2>
<p class="excert">
  There will be various risks that we probably or must face when we follow this project.
<br><br>  Regarding the development of the game, we have identified many risks. First of all, the Phaser 3 framework and MatterJS physics engine might be too complex to learn, so it may take us a long time to understand and get used to the concepts to code our game. This leads to the possibility that we might not be able to add certain features, or the game might perform poorly due to the complexity of the tools used. Furthermore, Phaser 3 does not support many old devices, so it can be hard for the game to reach users who do not care so much about technologies or simply love their old nostalgic devices. Another risk that we might face is scope creep, where we may try to add more features and functions to the game that are not initially in our plan. It is a problem that some projects might have because of careless preparation and planning; hence, we could avoid that by setting our scope, aims, and goals clearly at the start of the project. Lastly, due to the limited time for the project, we might not have enough time to playtest the game, which can result in poor game balance and many bugs in the final product submitted for the assignment.
<br><br>  There are a few risks associated with the development of our team’s GitHub website. To begin with, the website can run slowly and have low performance. Furthermore, we might not be able to upload the game onto a page of our website if our game’s source code is somehow not compatible with the website platform.
<br><br>  And the last and most challenging risk is that we cannot request authorization from the school to implement the game into the campus’ network. Even though it is reasonable due to security problems, having the game as an RMIT’s artefact to lift students’ mood during bad Internet connection times is what the project is also about.
</p>
<h2>5. Group process and communications
</h2>
<p class="excert">
  Regarding our group communication, we will have an in-person weekly group meeting every Thursday or Wednesday outside of lecture and tutorial sessions to discuss our project, ask questions, and plan what we will do for the project in the following week. If some members could not attend the meeting, we will text them the main points of the meeting and their tasks. We will also update our weekly progress in a Google Docs file every Friday. Furthermore, if some urgent issues or problems come up, we can text or call each other on our Messenger group chat, or we can have a face-to-face meeting on Monday. Lastly, if a member does not respond to our messages or attend our weekly meetings, we will apply our three-warnings system. This member will first receive a personal warning from our team leader or another member of the group, and if they repeat it for the second time, there will be a warning on the group chat. If this incident still occurs after two warnings, our group will raise this issue with our lecturer.
</p>
</div>
<div class="navigation-top">
</div>
<div class="navigation-area">
<div class="row">
<div
class="col-lg-6 col-md-6 col-12 nav-left flex-row d-flex justify-content-start align-items-center">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--================ Blog Area end =================-->
</main>
<footer>
<!-- Footer Start-->
<div class="footer-area">
<div class="container">
<div class="footer-bottom">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-xl-9 col-lg-9 ">
<div class="footer-copy-right">
<p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | </p>
</div>
</div>
<div class="col-xl-3 col-lg-3">
<!-- Footer Social -->
<div class="footer-social f-right">
<a href="https://github.com/kuri-team"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer End-->
</footer>
<!-- Scroll Up -->
<div id="back-top" >
<a title="Go to Top" href="#"> <i class="fas fa-level-up-alt"></i></a>
</div>
<!-- JS here -->
<!-- All JS Custom Plugins Link Here here -->
<script src="./assets/js/vendor/modernizr-3.5.0.min.js"></script>
<!-- Jquery, Popper, Bootstrap -->
<script src="./assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="./assets/js/popper.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<!-- Jquery Mobile Menu -->
<script src="./assets/js/jquery.slicknav.min.js"></script>
<!-- Jquery Slick , Owl-Carousel Plugins -->
<script src="./assets/js/owl.carousel.min.js"></script>
<script src="./assets/js/slick.min.js"></script>
<!-- One Page, Animated-HeadLin -->
<script src="./assets/js/wow.min.js"></script>
<script src="./assets/js/animated.headline.js"></script>
<script src="./assets/js/jquery.magnific-popup.js"></script>
<!-- Nice-select, sticky -->
<script src="./assets/js/jquery.nice-select.min.js"></script>
<script src="./assets/js/jquery.sticky.js"></script>
<!-- contact js -->
<script src="./assets/js/contact.js"></script>
<script src="./assets/js/jquery.form.js"></script>
<script src="./assets/js/jquery.validate.min.js"></script>
<script src="./assets/js/mail-script.js"></script>
<script src="./assets/js/jquery.ajaxchimp.min.js"></script>
<!-- Jquery Plugins, main Jquery -->
<script src="./assets/js/plugins.js"></script>
<script src="./assets/js/main.js"></script>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentSlide(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
</body>
</html>