Chapter 1 INTRODUCTION
1.1 Background of the Study
History is important to any country, especially in the Philippines. The history of the Philippines is rich in regards to conglomerated cultures of the past. There is no doubt that it is undeniably true. HeKaSi (Heograpiya, Kasaysayan at Sibika (Geography, History and Cibics)) and Araling Panlipunan (Social Studies) are being taught in to Filipino youth at an early stage of the primary education up to secondary education. Aside from society related content, the said two subjects also have the necessary information that pertains about the Philippine history. Though the Filipino language is used as the medium for teaching the said subject, many young Filipinos still get bored during class discussion. According to Mr. Xiao Chua, a radio segment host at DZRB, “Philippine history subject is boring due to memorization of unspellable names, hard to recall place and dates”.
Figure 1.1.a: Filipino children during class discussion
The developers interviewed Mr. Marlo C. Miranda, a high school teacher in Calamba National High School; teaching the Philippine history is an easy task but based on his own observation, some of his students considered the history related subject as uninteresting. According to him, “They prefer to play computer games than reading books”.
Aside to what the academy has already done, media companies produced television shows such as Bayani and Indio as medium to promote the Philippine history. But even with the full effort of the academe, media companies and the old generation citizens, the current youth of our era are now being swayed away by today’s modern technology such as Internet and computer games.
Based on the observations stated above, the lack of interest of the young Filipinos in their own history and low grades must be remedied. In order to do that, the developers came up with the following questions in mind: How about developing a web – based solution in promoting our history? What if the developer use and implement the concepts of game design and development to serve as a medium to answer this? Will a web – based game could really promote our history to the citizens of our current era? Those questions become the driving force of the developers to develop the thesis project entitled “The Curator: A Web-Based 2D Quest Game for Promoting the Philippine History”. The game not only promotes the history, but also to restore the interest of the youth in studying the Philippine history. The developers also assure that the game will be entertaining as much as it is educational.
1.2 Overview of the Current State of Technology
The developers conducted a survey on high school students of Calamba National High School. The results is quite surprising and based on the forty two (42) respondents, the respondents showed the lack of interest on the Philippine history subject. The developers believed that the unchanging way of traditional teaching is one of the factors affecting the respondents dealing with the said subject. The one hundred percent (100%) of the respondents are computer literate. Based on the survey that was conducted by the developers a total of thirty nine (39) out of forty two (42) students are getting addicted with Facebook game wherein the 82% of the respondents admit that they play often with it at least 3-6 hours a day. As a result, the survey also showed that some of the respondents got a lower grade particularly in Philippine history related subjects.
In addition, technology has been dramatically developed worldwide so far in most of social life aspects, especially the computer and internet. Computers are for general purpose use, but today, it is usually use for online gaming. There is no doubt many young Filipinos today are bound to computer games. As been stated by an article “These kids are becoming addicted to the Internet or Computer Games in much that same way that others became addicted to drugs or alcohol which result in academic, social, and occupational impairment. Although computer addiction is the lesser evil compared to drug addiction, it nevertheless takes away the priorities of these children. Even if they are done with their homework, they should be reading books”. [ACOM2012]
Figure 1.2.a: Filipino students playing computer games History-based games are computer games that usually include many historical places,
figures and other myth. In the Philippines, one good example is the “Anito: Defend a Land Enraged”. It is the first Filipino-made personal computer (PC) game. After two years of waiting, Philippine indie game developer Anino Entertainment launch its pioneering project: Anito. Production started in October 2001, with development wrapping up after two years of development. Anito is set in the 16th century on the island Maroka in Asia. Maroka is besieged both by internal conflict and armored invaders from a faraway place who are slowly turning the land into their monarch's colony. Datu Maktan – leader of the Mangatiwala tribe and the land's most influential peacemaker – mysteriously disappears, and it is up to his children Agila and Maya to find him and restore delicate peace that their father has kept in balance before conflicting forces tear the land apart.
Figure 1.2.b: Anito In-game screenshot
Figure 1.2.c: Anito characters
Anito is a Filipino-made computer game that includes numerous items, foods and figures that was based on Philippine culture. Some examples are Juan Tamad, Darna, Datu, Kapitana, Tanda, Tikbalang, Tamaraw, Bibingka, and Suman.
The Curator game has few similarities with Anito like including many Philippine artifacts such as manunggul jar, laguna copperplate and maitum jar. Those items are very significant to the Philippine history.
Project Rationale
The thesis project entitled, “The Curator: A Web Based 2D Quest Game for Promoting the Philippine History” is designed to enrich the knowledge of the young Filipinos in regards to Philippine culture and history. In addition, due to modern technologies that are currently existed today such as internet and computers; the game took advantage of it through incorporating many historical places, artifacts and figures. Hence, the game will not just educate; but to entertain the young Filipinos as well.
Chapter II PROJECT DESCRIPTION
2.1 Problem Statement
By evaluating the results of the survey conducted by the developers and reading various resources such as online sites, below are the problems that the developers discovered.
Based on the conducted survey on forty two (42) students of Calamba National High School, The developers discovered that twenty eight (28) out of forty two (42) students are not interested in history related subjects. In addition, sixty nine percent (69%) of the respondents got low grades in the said subject.
There is no doubt that many young Filipinos today are prefer to spend more time in Facebook and computer games than studying. It is clearly seen on the survey that thirty five percent (35%) of the respondents are using Facebook while the 25% are playing computer games. The complete survey details in the Figure 1.4.5 Appendix H, may explain further.
Modern historians are striving just to tell the young Filipinos how important the Philippine history is. As been stated in an article [ACOM2012], many young Filipinos are often found playing computer games. This statement was proven possible by the developers in the results of the survey, where 25% of the respondents play games while online. As a result of modern technologies today, computer games are undeniably one of the factors which affect the studies and thinking of young Filipinos when it comes to Philippine history.
Aside for the survey results, the developers also reviewed some articles available online. Between malls and museums, the chances are more Filipinos would choose to go shopping than scrutinizing an artifact. Students only come when their teachers required them to do reports about history. [IFIL2012]
2.2 Proposed Research Project
Below are the lists of objectives that the developers aim to solve the issues which were derived from the statement of the problem.
2.2.1 General Objective
Although the academe, media companies, historians and the old generation citizens are doing their best in promoting the importance of the history, the youth of the current generation are easily swayed. Therefore, the main objective of the study is to how to design, develop and implement a web – based solution that could reach out the youth to promote the Philippine history by creating a quest-type educational game that would provide entertainment as well, which could be accessed using social media site such as Facebook.
2.2.2 Specific Objectives
Specifically, the study aims to:
· To develop an online solution to reach the main objective by using the best and widely used tools in graphics, animation and programming language in web designing and game development.
The game not only focuses in reaching the main objective, but also in its design (user friendliness and site layout). The game was developed and implemented using the best tools that are widely used for Web Development such as Facebook Graph API and PHP; Adobe Flash, Google SketchUp and Adobe Photoshop for graphic design; and MySQL for its database handling management.
· To promote the Philippine history by developing a quest-type game that will refresh the knowledge of the players in Philippine history and provide entertainment at the same time.
At present, the active individuals/groups in promoting the Philippine history are the government itself, media companies, historians and the old generation citizens. The developerss created a game which is accessible via Facebook, which served as a medium in learning and promoting the Philippine history.
2.2.3 Scope and Limitations
The scope and limitations of the game must be laid down to serve as a guide for the future development of the proposed system.
2.2.3.1 Scope
The game “The Curator: A Web – Based 2D Quest Game is developed” to promote the Philippine history and it includes the following scope:
· An account is required to play the proposed game
· It showcased random Philippine history trivia.
· It can be played as a third person with perspective camera view.
· It used the game menus, title/captions for the user interface.
· It can be played on single player mode
· It can be played on a story mode game
· It can load and save the game thus, the gamer can continue the game anytime.
· The scores were based on the time played and quest items acquired.
· The game was deployed in an online based web server.
2.2.3.2 Limitations
Below are the following limitations of the game:
· The game can only be played using a computer with Internet, Web browser with Flash Player installed.
The game was hosted in an online server hence; it requires an internet connection in order to run the game. Flash player is also required for playing the animation related to the game.
· Other than mouse and keyboard, the game will not support other game peripherals like joysticks and gamepads.
The movement of the main character in the game will be controlled using a mouse click thus, other than mouse and keyboard there is no need to use other game peripherals.
2.2.4 Methodology
Rapid Application Development (RAD) is a software development methodology that uses minimal planning in favor of rapid prototyping. The "planning" of software developed using RAD is interleaved with writing the software itself. The lack of extensive pre-planning generally allows software to be written much faster, and makes it easier to change requirements. [WRAP2013] The developers choose the RAD methodology due to its fast approach in regards to software development. Making minimal requirements and prototyping makes RAD faster than any other methodology.
And unlike any other model, RAD has a timeboxing feature whereas; the developers can set an amount of time for a specific task like coding and designing the graphical user interface. In addition, prototyping can refined the initial requirements through showing the problem and solution as early as possible. Based on the selected methodology below are the tasks that the developers did upon the proposed game development.
· Requirements Planning. A requirement planning involves reviewing the areas that are clearly necessary to the system being built. The review creates a solid overview, covering the requirements and outlining the functions performed by the system. When properly executed, this first stage should produce a model of how the proposed system works. It should also clearly define the extent of the system, including its capabilities and limitations. Finally, it should justify the costs necessary to complete the model system. Below are the tasks that the developers did in the Requirements Planning phase:
o Brainstormed about the topic
o Identified what hardware and software should be used on the development.
o Data gathering
· User Design. User Design phase covers an in-depth look of business operations that relate to the system being designed. The users who will be employing the proposed system analyze how data is used and how this use affects the flow of operations from a business standpoint. This step is designed to eliminate ideas that work in theory but are inefficient in actual practice. By the end of this step, the general idea behind the new system begins to transform into a specific plan. Below are the tasks that the developers undergo in the User Design phase.
o Database design
o Graphical user interface design
· Construction. Construction phase consist of small groups of developers work alongside users to finish the system design and begin building it. This phase allows designers to program key parts of the system and immediately test features with user feedback. As new software is constructed and tested, any necessary instructions and procedures are created. Below are the tasks that the developers did in the Construction phase:
o System documentation
o Programming/Coding
o Whitebox testing
o Blackbox testing
· Implementation. At this point, the new software system is finalized and installed. If previous versions of the system are in use, connections are built to upgrade to the new version and transfer older data. Users are trained in the operation of the finished software, and the system process is complete. [ERAD2013] Below are the tasks that the developers did in the Implementation phase:
o User testing
o Deployment
o Maintenance
Chapter III THEORETICAL FRAMEWORK
A theoretical framework is a theoretical perspective. It can be simply a theory, but it can also be more general -- a basic approach to understanding something. Typically, a theoretical framework defines the kinds of variables that you will want to look at.
3.1 E-Learning
E-learning refers to the use of electronic media and information and communication technologies (ICT) in education. E-learning is broadly inclusive of all forms of educational technology in learning and teaching. E-learning includes numerous types of media that deliver text, audio, images, animation, and streaming video, and includes technology applications and processes such as audio or video tape, satellite TV, CD-ROM, and computer-based learning, as well as local intranet/extranet and web-based learning. Information and communication systems, whether free-standing or based on either local networks or the Internet in networked learning, underlie many e-learning processes. E-learning can occur in or out of the classroom. [WELE2013]
In addition, today’s young generation are bound into computers especially in gaming. There is no doubt about it. A good example of a popular computer game type today is RPG (Role Playing Game).
3.2 Role Playing Game
A role-playing game is a type of game where players assume the roles of fictional characters via role-playing. In fact, many non-athletic games involve some aspect of role-playing. However, role-playing games tend to focus on this aspect of behavior.
3.2.1 Gameplay
A gameplay is a specific way wherein the user or gamer interact with the game. There are some instances that the game will ask the gamer to do a specific thing such as completing a task or a quest. The Curator game is not different with other RPG games that can be played over the internet. However its aim is just to educate the gamer and there is no level-ups or gift buying thing. Like other game, the sequence will always start on the introduction like the following images:
Figure 3.2.1.a: The Curator Intro
In addition, items, maps and characters can be seen on the game. The protagonist is aim to solve all the quest challenges just to get all the artifacts and finish the game.
Below are some of the screenshots of The Curator game.
Figure 3.2.1.a: The Curator game in-game screenshots
3.2 State Transition Diagram of a Game loop
Figure 3.1.a: Game state diagram
A state diagram for a game loop, a game usually starts in the initialization state and whereas the game will execute continuously until the player will not end the game.
3.3 Collision detection
Collision detection for most games today used different algorithms or physics engine. The algorithms for every game may vary and it depends on the game’s complexity. Not all games require complex algorithms whereas a simple computation will suffice it through the use of Pythagorean Theorem.
3.3.1 Pythagorean Theorem
Pythagorean Theorem—or Pythagoras' theorem—is a relation in Euclidean geometry among the three sides of a right triangle. It states that the square of the hypotenuse (the side opposite the right angle) is equal to the sum of the squares of the other two sides. The theorem can be written as an equation relating the lengths of the sides a, b and c, often called the
Pythagorean equation: The result of this computation will be evaluated through conditional statement. For example,
The Curator: A Web – Based 2D Quest Game For Promoting The Philippine History
Where:
ar = radius of point a
ax = x coordinate of point a
ay = y coordinate of point a
br = radius of point b
bx = x coordinate of point b
by = y coordinate of point b
Pythagorean Theorem being used on the game (for distance computation)
Pythagorean Theorem being used on the game (for collision)
3.4 Path finding
Pathfinding or pathing is the plotting, by a computer application, of the shortest route between two points. It is a more practical variant on solving mazes. This field of research is based heavily on Dijkstra's algorithm for finding the shortest path on a weighted graph [WPAT2013]
3.4.1 A* algorithm
A* (A-star) is a computer algorithm that is widely used in path finding and graph traversal, the process of plotting an efficiently traversable path between points, called nodes. Noted for its performance and accuracy, it enjoys widespread use. A good example for a* algorithm is the following figure:
The Curator: A Web – Based 2D Quest Game For Promoting The Philippine History
Figure 3.3.1a (Green square is starting point, Blue square is closed path, Red is end point)
The key to determine which square to take on the next step is:
F = G + H
Where
G = the movement cost to move from the starting point A to a given square on the grid, following the path generated to get there.
H = the estimated movement cost to move from that given square on the grid to the final destination, point B
Below is the steps on how A* algorithm works
1) Start from target point to start point.
2) Add the starting square (or node) to the open list.
3) Repeat the following:
a) Look for the lowest F cost square on the open list. We refer to this as the current square.
b) Switch it to the closed list.
c) For each of the 8 squares adjacent to this current square …
If it is not walkable or if it is on the closed list, ignore it. Otherwise do the following.
If it isn’t on the open list, add it to the open list. Make the current square the parent of this square. Record the F, G, and H costs of the square.
If it is on the open list already, check to see if this path to that square is better, using G cost as the measure. A lower G cost means that this is a better path. If so, change the parent of the square to the current square, and recalculate the G and F scores of the square. If you are keeping your open list sorted by F score, you may need to resort the list to account for the change.
d) Stop when you:
Add the target square to the closed list, in which case the path has been found or Fail to find the target square, and the open list is empty. In this case, there is no path. [PPAT2013]
The A* algorithm being used on the game
Figure 3.3.1b: Character walking on selected path
3.5 Animation
Animation is the process of creating a continuous motion and shape change illusion by means of the rapid display of a sequence of static images that minimally differ from each other.
Figure 3.5.a: The curator main character with 128 frames.
Chapter IV PROJECT MANAGEMENT
4.1 Calendar of Activities
4.1.1 Description of the Activities
Based on the selected methodology, this part of the documentation will discuss how the developers performed the enumerated activities under each phase that was tackled in the previous chapter.
· Requirements Planning. It is where the developers defined what are the primary requirements of the proposed study such as finding the right topic title, software tools should be used and the data gathering procedures. Below are the specific tasks that the developers did during development. o The developers brainstormed about the topic title and observed some
computer games such as Wings of Destiny, Anito: Defend A Land Enraged, Runescape and Perfect World.
o The developers identified what are the proper software tools should be used on the game such as Flash CS4 with Action Script 3, Adobe Photoshop, Google SketchUp, PHP and MySQL. In addition, the developers also identified what are the hardware tools that will be used on the development such as a laptop computer, keyboard, mouse and scanner.
o Data Gathering and Procedure. It is the process of gathering and measuring information on variables of interest.
§ Internet Surfing. The developers visited the internet to gather information from websites that tackled the same topic as the proposed study.
§ Library Research. The developers used the school library for gathering history related topics that also pertains the Philippine culture.
§ Interview. This method of data gathering was tiring yet most effective tool to gather information needed to supply the
developers with information needed. Interview may slow down the development but it is the most reliable source of information around.
§ Questionnaire. The developers conducted a survey on high school students and teachers to know more about the student’s opinions about the Philippine history.
· User Design. It is the phase wherein the developers designed the database and graphical user interface of the proposed game.
o After getting the proper software tools for the development, the developers designed the database to organize its content.
o The developers designed the graphical user interface of the game such as Maps, characters, game menus, trees and 2D houses.
· Construction. It is the important phase wherein the whole development will process. Below are the specific tasks that the developers will undergo. o As the developments started, all matters related to the game were included in the system documentation.
o It is one of the important parts of the development wherein the developers did the programming of the game. Action Script 3 is the main programming language that is used on the game to animate the characters and loading screen. In addition, PHP will was also used for integrating the game with Facebook API.
o Whitebox testing. The developers choose inputs to exercise paths through code and determine the appropriate output
o Blackbox testing. The developers examined the functionality of the application (e.g what the software does) without peering into its internal structures or workings.
· Implementation. The last phase in RAD, this allows the developers to deploy and conduct system testing to the finished output. Below are the specific tasks that the developers undergo.
o After the Whitebox and Blackbox testing, the developers observed the game to make sure that it works properly before it proceeds to the deployment phase.
o The developers deployed the game through uploading all swf files, images, sounds in an online web server.
o After the deployment stage, the developers will do the maintenance through updating the source code of the proposed game.
4.1.3 GANTT Chart of Activities
Table 4.1.2.a: Gantt chart of the Proposed Study
4.2 Resources
4.2.1 Hardware
The following lists are the hardware that was used:
· Development. The developers used keyboard (QUERTY keyboard with 101 keys key format); a laptop computer with 64 bit processor and 4GB of RAM. Additionally, a scanner with an optical resolution of 1600 dpi will be used to scan the character designs and a speaker with 6.7 inch woofer for testing the game’s background sound.
· Deployment The system will use a monitor that supports 800 x 600 and 1024 x 768 screen resolution, mouse (USB/PS2 Compatible) and keyboard (QUERTY keyboard with 101 keys key format) and a speaker with 6.7 inch woofer.
4.2.2 Software
The following lists of software were used for developing the proposed system.
· For Development. The developers used different software for animation, graphics, database handling and sound editing:
o Adobe Flash with Action Script 3 was used for coding and animating the objects such as characters and backgrounds inside the proposed game.
o Blender was used for creating and animating the main character
o Adobe Photoshop CS6 were also used for editing and creating 2D Graphics and game backgrounds, Google SketchUp is used for creating 2D Graphics such as traditional house.
o MySQL Server was used for database management.
o PHP was used for database manipulation and integrating with Facebook API.
· For Documentation and Presentation. Below are the lists of software that the system used for documentation:
o Microsoft Word 2007 for writing the documentation.
o Adobe Flash and Microsoft PowerPoint for creating the proposed system’s presentations and demo.
· For Implementation and Deployment. Below are the lists of software that the system used for deployment in order for the game to run:
o Flash Player for playing the animation. o Web browser required to play the game.
o Game account is required to play the game. The gamer can easily create an account through the game’s website or by just signing up through Facebook.
1.1 Background of the Study
History is important to any country, especially in the Philippines. The history of the Philippines is rich in regards to conglomerated cultures of the past. There is no doubt that it is undeniably true. HeKaSi (Heograpiya, Kasaysayan at Sibika (Geography, History and Cibics)) and Araling Panlipunan (Social Studies) are being taught in to Filipino youth at an early stage of the primary education up to secondary education. Aside from society related content, the said two subjects also have the necessary information that pertains about the Philippine history. Though the Filipino language is used as the medium for teaching the said subject, many young Filipinos still get bored during class discussion. According to Mr. Xiao Chua, a radio segment host at DZRB, “Philippine history subject is boring due to memorization of unspellable names, hard to recall place and dates”.
Figure 1.1.a: Filipino children during class discussion
The developers interviewed Mr. Marlo C. Miranda, a high school teacher in Calamba National High School; teaching the Philippine history is an easy task but based on his own observation, some of his students considered the history related subject as uninteresting. According to him, “They prefer to play computer games than reading books”.
Aside to what the academy has already done, media companies produced television shows such as Bayani and Indio as medium to promote the Philippine history. But even with the full effort of the academe, media companies and the old generation citizens, the current youth of our era are now being swayed away by today’s modern technology such as Internet and computer games.
Based on the observations stated above, the lack of interest of the young Filipinos in their own history and low grades must be remedied. In order to do that, the developers came up with the following questions in mind: How about developing a web – based solution in promoting our history? What if the developer use and implement the concepts of game design and development to serve as a medium to answer this? Will a web – based game could really promote our history to the citizens of our current era? Those questions become the driving force of the developers to develop the thesis project entitled “The Curator: A Web-Based 2D Quest Game for Promoting the Philippine History”. The game not only promotes the history, but also to restore the interest of the youth in studying the Philippine history. The developers also assure that the game will be entertaining as much as it is educational.
1.2 Overview of the Current State of Technology
The developers conducted a survey on high school students of Calamba National High School. The results is quite surprising and based on the forty two (42) respondents, the respondents showed the lack of interest on the Philippine history subject. The developers believed that the unchanging way of traditional teaching is one of the factors affecting the respondents dealing with the said subject. The one hundred percent (100%) of the respondents are computer literate. Based on the survey that was conducted by the developers a total of thirty nine (39) out of forty two (42) students are getting addicted with Facebook game wherein the 82% of the respondents admit that they play often with it at least 3-6 hours a day. As a result, the survey also showed that some of the respondents got a lower grade particularly in Philippine history related subjects.
In addition, technology has been dramatically developed worldwide so far in most of social life aspects, especially the computer and internet. Computers are for general purpose use, but today, it is usually use for online gaming. There is no doubt many young Filipinos today are bound to computer games. As been stated by an article “These kids are becoming addicted to the Internet or Computer Games in much that same way that others became addicted to drugs or alcohol which result in academic, social, and occupational impairment. Although computer addiction is the lesser evil compared to drug addiction, it nevertheless takes away the priorities of these children. Even if they are done with their homework, they should be reading books”. [ACOM2012]
Figure 1.2.a: Filipino students playing computer games History-based games are computer games that usually include many historical places,
figures and other myth. In the Philippines, one good example is the “Anito: Defend a Land Enraged”. It is the first Filipino-made personal computer (PC) game. After two years of waiting, Philippine indie game developer Anino Entertainment launch its pioneering project: Anito. Production started in October 2001, with development wrapping up after two years of development. Anito is set in the 16th century on the island Maroka in Asia. Maroka is besieged both by internal conflict and armored invaders from a faraway place who are slowly turning the land into their monarch's colony. Datu Maktan – leader of the Mangatiwala tribe and the land's most influential peacemaker – mysteriously disappears, and it is up to his children Agila and Maya to find him and restore delicate peace that their father has kept in balance before conflicting forces tear the land apart.
Figure 1.2.b: Anito In-game screenshot
Figure 1.2.c: Anito characters
Anito is a Filipino-made computer game that includes numerous items, foods and figures that was based on Philippine culture. Some examples are Juan Tamad, Darna, Datu, Kapitana, Tanda, Tikbalang, Tamaraw, Bibingka, and Suman.
The Curator game has few similarities with Anito like including many Philippine artifacts such as manunggul jar, laguna copperplate and maitum jar. Those items are very significant to the Philippine history.
Project Rationale
The thesis project entitled, “The Curator: A Web Based 2D Quest Game for Promoting the Philippine History” is designed to enrich the knowledge of the young Filipinos in regards to Philippine culture and history. In addition, due to modern technologies that are currently existed today such as internet and computers; the game took advantage of it through incorporating many historical places, artifacts and figures. Hence, the game will not just educate; but to entertain the young Filipinos as well.
Chapter II PROJECT DESCRIPTION
2.1 Problem Statement
By evaluating the results of the survey conducted by the developers and reading various resources such as online sites, below are the problems that the developers discovered.
Based on the conducted survey on forty two (42) students of Calamba National High School, The developers discovered that twenty eight (28) out of forty two (42) students are not interested in history related subjects. In addition, sixty nine percent (69%) of the respondents got low grades in the said subject.
There is no doubt that many young Filipinos today are prefer to spend more time in Facebook and computer games than studying. It is clearly seen on the survey that thirty five percent (35%) of the respondents are using Facebook while the 25% are playing computer games. The complete survey details in the Figure 1.4.5 Appendix H, may explain further.
Modern historians are striving just to tell the young Filipinos how important the Philippine history is. As been stated in an article [ACOM2012], many young Filipinos are often found playing computer games. This statement was proven possible by the developers in the results of the survey, where 25% of the respondents play games while online. As a result of modern technologies today, computer games are undeniably one of the factors which affect the studies and thinking of young Filipinos when it comes to Philippine history.
Aside for the survey results, the developers also reviewed some articles available online. Between malls and museums, the chances are more Filipinos would choose to go shopping than scrutinizing an artifact. Students only come when their teachers required them to do reports about history. [IFIL2012]
2.2 Proposed Research Project
Below are the lists of objectives that the developers aim to solve the issues which were derived from the statement of the problem.
2.2.1 General Objective
Although the academe, media companies, historians and the old generation citizens are doing their best in promoting the importance of the history, the youth of the current generation are easily swayed. Therefore, the main objective of the study is to how to design, develop and implement a web – based solution that could reach out the youth to promote the Philippine history by creating a quest-type educational game that would provide entertainment as well, which could be accessed using social media site such as Facebook.
2.2.2 Specific Objectives
Specifically, the study aims to:
· To develop an online solution to reach the main objective by using the best and widely used tools in graphics, animation and programming language in web designing and game development.
The game not only focuses in reaching the main objective, but also in its design (user friendliness and site layout). The game was developed and implemented using the best tools that are widely used for Web Development such as Facebook Graph API and PHP; Adobe Flash, Google SketchUp and Adobe Photoshop for graphic design; and MySQL for its database handling management.
· To promote the Philippine history by developing a quest-type game that will refresh the knowledge of the players in Philippine history and provide entertainment at the same time.
At present, the active individuals/groups in promoting the Philippine history are the government itself, media companies, historians and the old generation citizens. The developerss created a game which is accessible via Facebook, which served as a medium in learning and promoting the Philippine history.
2.2.3 Scope and Limitations
The scope and limitations of the game must be laid down to serve as a guide for the future development of the proposed system.
2.2.3.1 Scope
The game “The Curator: A Web – Based 2D Quest Game is developed” to promote the Philippine history and it includes the following scope:
· An account is required to play the proposed game
· It showcased random Philippine history trivia.
· It can be played as a third person with perspective camera view.
· It used the game menus, title/captions for the user interface.
· It can be played on single player mode
· It can be played on a story mode game
· It can load and save the game thus, the gamer can continue the game anytime.
· The scores were based on the time played and quest items acquired.
· The game was deployed in an online based web server.
2.2.3.2 Limitations
Below are the following limitations of the game:
· The game can only be played using a computer with Internet, Web browser with Flash Player installed.
The game was hosted in an online server hence; it requires an internet connection in order to run the game. Flash player is also required for playing the animation related to the game.
· Other than mouse and keyboard, the game will not support other game peripherals like joysticks and gamepads.
The movement of the main character in the game will be controlled using a mouse click thus, other than mouse and keyboard there is no need to use other game peripherals.
2.2.4 Methodology
Rapid Application Development (RAD) is a software development methodology that uses minimal planning in favor of rapid prototyping. The "planning" of software developed using RAD is interleaved with writing the software itself. The lack of extensive pre-planning generally allows software to be written much faster, and makes it easier to change requirements. [WRAP2013] The developers choose the RAD methodology due to its fast approach in regards to software development. Making minimal requirements and prototyping makes RAD faster than any other methodology.
And unlike any other model, RAD has a timeboxing feature whereas; the developers can set an amount of time for a specific task like coding and designing the graphical user interface. In addition, prototyping can refined the initial requirements through showing the problem and solution as early as possible. Based on the selected methodology below are the tasks that the developers did upon the proposed game development.
· Requirements Planning. A requirement planning involves reviewing the areas that are clearly necessary to the system being built. The review creates a solid overview, covering the requirements and outlining the functions performed by the system. When properly executed, this first stage should produce a model of how the proposed system works. It should also clearly define the extent of the system, including its capabilities and limitations. Finally, it should justify the costs necessary to complete the model system. Below are the tasks that the developers did in the Requirements Planning phase:
o Brainstormed about the topic
o Identified what hardware and software should be used on the development.
o Data gathering
· User Design. User Design phase covers an in-depth look of business operations that relate to the system being designed. The users who will be employing the proposed system analyze how data is used and how this use affects the flow of operations from a business standpoint. This step is designed to eliminate ideas that work in theory but are inefficient in actual practice. By the end of this step, the general idea behind the new system begins to transform into a specific plan. Below are the tasks that the developers undergo in the User Design phase.
o Database design
o Graphical user interface design
· Construction. Construction phase consist of small groups of developers work alongside users to finish the system design and begin building it. This phase allows designers to program key parts of the system and immediately test features with user feedback. As new software is constructed and tested, any necessary instructions and procedures are created. Below are the tasks that the developers did in the Construction phase:
o System documentation
o Programming/Coding
o Whitebox testing
o Blackbox testing
· Implementation. At this point, the new software system is finalized and installed. If previous versions of the system are in use, connections are built to upgrade to the new version and transfer older data. Users are trained in the operation of the finished software, and the system process is complete. [ERAD2013] Below are the tasks that the developers did in the Implementation phase:
o User testing
o Deployment
o Maintenance
Chapter III THEORETICAL FRAMEWORK
A theoretical framework is a theoretical perspective. It can be simply a theory, but it can also be more general -- a basic approach to understanding something. Typically, a theoretical framework defines the kinds of variables that you will want to look at.
3.1 E-Learning
E-learning refers to the use of electronic media and information and communication technologies (ICT) in education. E-learning is broadly inclusive of all forms of educational technology in learning and teaching. E-learning includes numerous types of media that deliver text, audio, images, animation, and streaming video, and includes technology applications and processes such as audio or video tape, satellite TV, CD-ROM, and computer-based learning, as well as local intranet/extranet and web-based learning. Information and communication systems, whether free-standing or based on either local networks or the Internet in networked learning, underlie many e-learning processes. E-learning can occur in or out of the classroom. [WELE2013]
In addition, today’s young generation are bound into computers especially in gaming. There is no doubt about it. A good example of a popular computer game type today is RPG (Role Playing Game).
3.2 Role Playing Game
A role-playing game is a type of game where players assume the roles of fictional characters via role-playing. In fact, many non-athletic games involve some aspect of role-playing. However, role-playing games tend to focus on this aspect of behavior.
3.2.1 Gameplay
A gameplay is a specific way wherein the user or gamer interact with the game. There are some instances that the game will ask the gamer to do a specific thing such as completing a task or a quest. The Curator game is not different with other RPG games that can be played over the internet. However its aim is just to educate the gamer and there is no level-ups or gift buying thing. Like other game, the sequence will always start on the introduction like the following images:
Figure 3.2.1.a: The Curator Intro
In addition, items, maps and characters can be seen on the game. The protagonist is aim to solve all the quest challenges just to get all the artifacts and finish the game.
Below are some of the screenshots of The Curator game.
Figure 3.2.1.a: The Curator game in-game screenshots
3.2 State Transition Diagram of a Game loop
Figure 3.1.a: Game state diagram
A state diagram for a game loop, a game usually starts in the initialization state and whereas the game will execute continuously until the player will not end the game.
3.3 Collision detection
Collision detection for most games today used different algorithms or physics engine. The algorithms for every game may vary and it depends on the game’s complexity. Not all games require complex algorithms whereas a simple computation will suffice it through the use of Pythagorean Theorem.
3.3.1 Pythagorean Theorem
Pythagorean Theorem—or Pythagoras' theorem—is a relation in Euclidean geometry among the three sides of a right triangle. It states that the square of the hypotenuse (the side opposite the right angle) is equal to the sum of the squares of the other two sides. The theorem can be written as an equation relating the lengths of the sides a, b and c, often called the
Pythagorean equation: The result of this computation will be evaluated through conditional statement. For example,
The Curator: A Web – Based 2D Quest Game For Promoting The Philippine History
Where:
ar = radius of point a
ax = x coordinate of point a
ay = y coordinate of point a
br = radius of point b
bx = x coordinate of point b
by = y coordinate of point b
Pythagorean Theorem being used on the game (for distance computation)
Pythagorean Theorem being used on the game (for collision)
3.4 Path finding
Pathfinding or pathing is the plotting, by a computer application, of the shortest route between two points. It is a more practical variant on solving mazes. This field of research is based heavily on Dijkstra's algorithm for finding the shortest path on a weighted graph [WPAT2013]
3.4.1 A* algorithm
A* (A-star) is a computer algorithm that is widely used in path finding and graph traversal, the process of plotting an efficiently traversable path between points, called nodes. Noted for its performance and accuracy, it enjoys widespread use. A good example for a* algorithm is the following figure:
The Curator: A Web – Based 2D Quest Game For Promoting The Philippine History
Figure 3.3.1a (Green square is starting point, Blue square is closed path, Red is end point)
The key to determine which square to take on the next step is:
F = G + H
Where
G = the movement cost to move from the starting point A to a given square on the grid, following the path generated to get there.
H = the estimated movement cost to move from that given square on the grid to the final destination, point B
Below is the steps on how A* algorithm works
1) Start from target point to start point.
2) Add the starting square (or node) to the open list.
3) Repeat the following:
a) Look for the lowest F cost square on the open list. We refer to this as the current square.
b) Switch it to the closed list.
c) For each of the 8 squares adjacent to this current square …
If it is not walkable or if it is on the closed list, ignore it. Otherwise do the following.
If it isn’t on the open list, add it to the open list. Make the current square the parent of this square. Record the F, G, and H costs of the square.
If it is on the open list already, check to see if this path to that square is better, using G cost as the measure. A lower G cost means that this is a better path. If so, change the parent of the square to the current square, and recalculate the G and F scores of the square. If you are keeping your open list sorted by F score, you may need to resort the list to account for the change.
d) Stop when you:
Add the target square to the closed list, in which case the path has been found or Fail to find the target square, and the open list is empty. In this case, there is no path. [PPAT2013]
The A* algorithm being used on the game
Figure 3.3.1b: Character walking on selected path
3.5 Animation
Animation is the process of creating a continuous motion and shape change illusion by means of the rapid display of a sequence of static images that minimally differ from each other.
Figure 3.5.a: The curator main character with 128 frames.
Chapter IV PROJECT MANAGEMENT
4.1 Calendar of Activities
4.1.1 Description of the Activities
Based on the selected methodology, this part of the documentation will discuss how the developers performed the enumerated activities under each phase that was tackled in the previous chapter.
· Requirements Planning. It is where the developers defined what are the primary requirements of the proposed study such as finding the right topic title, software tools should be used and the data gathering procedures. Below are the specific tasks that the developers did during development. o The developers brainstormed about the topic title and observed some
computer games such as Wings of Destiny, Anito: Defend A Land Enraged, Runescape and Perfect World.
o The developers identified what are the proper software tools should be used on the game such as Flash CS4 with Action Script 3, Adobe Photoshop, Google SketchUp, PHP and MySQL. In addition, the developers also identified what are the hardware tools that will be used on the development such as a laptop computer, keyboard, mouse and scanner.
o Data Gathering and Procedure. It is the process of gathering and measuring information on variables of interest.
§ Internet Surfing. The developers visited the internet to gather information from websites that tackled the same topic as the proposed study.
§ Library Research. The developers used the school library for gathering history related topics that also pertains the Philippine culture.
§ Interview. This method of data gathering was tiring yet most effective tool to gather information needed to supply the
developers with information needed. Interview may slow down the development but it is the most reliable source of information around.
§ Questionnaire. The developers conducted a survey on high school students and teachers to know more about the student’s opinions about the Philippine history.
· User Design. It is the phase wherein the developers designed the database and graphical user interface of the proposed game.
o After getting the proper software tools for the development, the developers designed the database to organize its content.
o The developers designed the graphical user interface of the game such as Maps, characters, game menus, trees and 2D houses.
· Construction. It is the important phase wherein the whole development will process. Below are the specific tasks that the developers will undergo. o As the developments started, all matters related to the game were included in the system documentation.
o It is one of the important parts of the development wherein the developers did the programming of the game. Action Script 3 is the main programming language that is used on the game to animate the characters and loading screen. In addition, PHP will was also used for integrating the game with Facebook API.
o Whitebox testing. The developers choose inputs to exercise paths through code and determine the appropriate output
o Blackbox testing. The developers examined the functionality of the application (e.g what the software does) without peering into its internal structures or workings.
· Implementation. The last phase in RAD, this allows the developers to deploy and conduct system testing to the finished output. Below are the specific tasks that the developers undergo.
o After the Whitebox and Blackbox testing, the developers observed the game to make sure that it works properly before it proceeds to the deployment phase.
o The developers deployed the game through uploading all swf files, images, sounds in an online web server.
o After the deployment stage, the developers will do the maintenance through updating the source code of the proposed game.
4.1.3 GANTT Chart of Activities
Table 4.1.2.a: Gantt chart of the Proposed Study
4.2 Resources
4.2.1 Hardware
The following lists are the hardware that was used:
· Development. The developers used keyboard (QUERTY keyboard with 101 keys key format); a laptop computer with 64 bit processor and 4GB of RAM. Additionally, a scanner with an optical resolution of 1600 dpi will be used to scan the character designs and a speaker with 6.7 inch woofer for testing the game’s background sound.
· Deployment The system will use a monitor that supports 800 x 600 and 1024 x 768 screen resolution, mouse (USB/PS2 Compatible) and keyboard (QUERTY keyboard with 101 keys key format) and a speaker with 6.7 inch woofer.
4.2.2 Software
The following lists of software were used for developing the proposed system.
· For Development. The developers used different software for animation, graphics, database handling and sound editing:
o Adobe Flash with Action Script 3 was used for coding and animating the objects such as characters and backgrounds inside the proposed game.
o Blender was used for creating and animating the main character
o Adobe Photoshop CS6 were also used for editing and creating 2D Graphics and game backgrounds, Google SketchUp is used for creating 2D Graphics such as traditional house.
o MySQL Server was used for database management.
o PHP was used for database manipulation and integrating with Facebook API.
· For Documentation and Presentation. Below are the lists of software that the system used for documentation:
o Microsoft Word 2007 for writing the documentation.
o Adobe Flash and Microsoft PowerPoint for creating the proposed system’s presentations and demo.
· For Implementation and Deployment. Below are the lists of software that the system used for deployment in order for the game to run:
o Flash Player for playing the animation. o Web browser required to play the game.
o Game account is required to play the game. The gamer can easily create an account through the game’s website or by just signing up through Facebook.
Last edited:
