Project Xeno
Project Xeno is a game created by Team Kakushin, (me, Anis Meah, Jawad Rahman, and Fardin Chowdhury). It falls under the shooter/visual novel genre. As for the story, a character named John is late for school one day and ends up "accidentally" in a different station when he takes his usual train in the morning.Where is he and how did he get there? Join John on his journey to figure out these things in Project Xeno.
Hello. My name is Brandon Wilson and I am one of the developers of Project Xeno and am also the leader of Team Kakushin. I was in charge of all of the scene backgrounds and animations for the characters in the game. For example, John's hair swinging back and forth at the top is a gif of two frames. All of the in-game characters have frames. I was also in charge of making the various forms of John, like making him face forward and back. Dialogue was a major part of my job too. Every scene except for some has dialogue. This game is very story driven as it is only a demo, there is much that players may want to find. Of course, I'm open to any feedback that may be presented to me. As for how I did my part, it was in JavaScript of course. This project was done on Code.org and can be found here...
https://studio.code.org/projects/applab/rF2WQCukkR78JGz7THPYH1VMM3gbkFkN3jJRfVjO6_M
WARNING: This section contains spoilers, read at your own risk or after you play the game!
As for the code directly, I made functions that represent each cutscene. This means from the title screen, I can call any of the scene functions and it will take me there directly with no errors. The dialogue all goes on it's own in a 3000 millisecond interval to update the text. Each function has a local variable to track the pageNum variable which starts at index 0. There is also an array for each scene that does have dialogue to store the text in it. That way, whenever the variable pageNum is increased, the index number is increased and called to display that text. As it progresses, each 3000 milliseconds, the function views the value of pageNum to set the text depending on the array of text and also start the next cutscene at the end of the array. That's pretty much how the dialogue works.
Next I'm going to explain the transitions within the scenes. At the end of each scene, there is a line of code in the function that checks if the pageNum is at the last page. When it is, the next cutscene function is called. There is a scene where John has to walk up a staircase and it is user controlled. I didn't do the code for the movement code, that way Jawad, but for the transition, I altered the code to make it so when John collides with the staircase, it transitions to the next scene and starts the dialogue.
All the characters as I said before, have animations, meaning they are a gif of different frames. For example, when I made John, his hair swishes back and forth. This was created like that as a gif which one frame his hair is pointing forward, and the other where his hair moves back. This frame is also at 1 fps (frames per second). Other scenes that have John changing forms due to AM, have his changing colors constantly from a light green to a darker one. This is also a gif.
If you have played through the game and got to the futuristic city scenes, you may notice that when John and AM merge, AM disappears and John looks different. This was done simply with hiding the element showing AM and then changing the image url of John. This same concept was behind the appearance of the enemy AI (showing the element of the various enemy AI) and the breaking apart of AM and John (showing the element of AM and changing the image url of John). All of these elements were put together to make the cutscene more action packed, which is what we aim for as Team Kakushin.
The theme behind this game was Automated Communities. In other words, what would the world look like in 2050? What does the future hold for the world? We looked at it from a negative perspective. The world has been taken over by AI and humanity is going extinct. What will happen next? Find out in about 30 years...
Hello. My name is Brandon Wilson and I am one of the developers of Project Xeno and am also the leader of Team Kakushin. I was in charge of all of the scene backgrounds and animations for the characters in the game. For example, John's hair swinging back and forth at the top is a gif of two frames. All of the in-game characters have frames. I was also in charge of making the various forms of John, like making him face forward and back. Dialogue was a major part of my job too. Every scene except for some has dialogue. This game is very story driven as it is only a demo, there is much that players may want to find. Of course, I'm open to any feedback that may be presented to me. As for how I did my part, it was in JavaScript of course. This project was done on Code.org and can be found here...
https://studio.code.org/projects/applab/rF2WQCukkR78JGz7THPYH1VMM3gbkFkN3jJRfVjO6_M
WARNING: This section contains spoilers, read at your own risk or after you play the game!
As for the code directly, I made functions that represent each cutscene. This means from the title screen, I can call any of the scene functions and it will take me there directly with no errors. The dialogue all goes on it's own in a 3000 millisecond interval to update the text. Each function has a local variable to track the pageNum variable which starts at index 0. There is also an array for each scene that does have dialogue to store the text in it. That way, whenever the variable pageNum is increased, the index number is increased and called to display that text. As it progresses, each 3000 milliseconds, the function views the value of pageNum to set the text depending on the array of text and also start the next cutscene at the end of the array. That's pretty much how the dialogue works.
Next I'm going to explain the transitions within the scenes. At the end of each scene, there is a line of code in the function that checks if the pageNum is at the last page. When it is, the next cutscene function is called. There is a scene where John has to walk up a staircase and it is user controlled. I didn't do the code for the movement code, that way Jawad, but for the transition, I altered the code to make it so when John collides with the staircase, it transitions to the next scene and starts the dialogue.
All the characters as I said before, have animations, meaning they are a gif of different frames. For example, when I made John, his hair swishes back and forth. This was created like that as a gif which one frame his hair is pointing forward, and the other where his hair moves back. This frame is also at 1 fps (frames per second). Other scenes that have John changing forms due to AM, have his changing colors constantly from a light green to a darker one. This is also a gif.
If you have played through the game and got to the futuristic city scenes, you may notice that when John and AM merge, AM disappears and John looks different. This was done simply with hiding the element showing AM and then changing the image url of John. This same concept was behind the appearance of the enemy AI (showing the element of the various enemy AI) and the breaking apart of AM and John (showing the element of AM and changing the image url of John). All of these elements were put together to make the cutscene more action packed, which is what we aim for as Team Kakushin.
The theme behind this game was Automated Communities. In other words, what would the world look like in 2050? What does the future hold for the world? We looked at it from a negative perspective. The world has been taken over by AI and humanity is going extinct. What will happen next? Find out in about 30 years...
Comments
Post a Comment