New Level Issue

[CyberLord09]

Ancient Greece Level

Enemies:

• For the walking enemy we plan to use a sprite of a three-headed dog called Cerberus. For the flying enemy, we plan to use a dragon spritesheet of a dragon named Chimera.

  To do this we will extend the new "Enemy.js" file that our team created and change it to complete behaviors that we want for our enemy. During this process, we will also use the Single Responsibility Principle to split up the update function in the Enemy.js file to have different responsibilities like updating the direction on the x axis and updating the direction on the y-axis. This will help in simplifying the code.

Main Player:

• To create a new main player, we found a wizard spritesheet online. We are using a software called Piskel to edit this spritesheet to our liking.
• This main player will extend the new "PlayerBase" that was created to make sure everything in the repository is using the same base player.

Background:

• The background of the level will be a castle

This level will also implement another thing that are team created where certain enemies and objects only are in the level in certain difficulty modes. This is using the following code format:

difficulties: ["normal", "hard", "impossible"]

On a side note, this level will have a minilevel in it that will be explained one of the other issues

[illuminati1618]

Constructing the player

The first main change we had made was the player for our level. The steps we had taken to do this were:

1. Find a sprite sheet with all of the basic required animations (idle, walk, run, jump)

   • After using this, we determined that the animations ran too fast, because there were only 8 frames per animation (optimal is anything from 16-48 in the case of our character)

2. To fix that, I duplicated each frame twice (creating three of each frame), allowing the sprite to run an animation three times per click, essentially slowing down the frame rate to one-third of the original speed.

3. Also, there were only right facing animations, so we had to duplicate our entire spritesheet and reverse each sprite over the y-axis so that it faced the other way. This was the hardest part of creating the sprite. In order to add a new animation to the player (ex. an attack animation), the current sprite sheet will have to be combined with a sprite sheet of the attack animation.

   • Original:

     ---->

   • Modified:

     <---- and ---->

4. After preparing the sprite sheet, the last thing to do was creating a playerGreece.js file using Player.js and after doing so, we modified the collisions to be with Cerberus (our version of a goomba), Chimera (our version of a flying goomba), and the Greece flag (our version of the endpoint)

Creating Cerberus

The next major change to our game level was our enemy. This one specifically was the modification to the goomba, using enemy.js

• Cerberus is the hound that guards the gates of the underworld, in Greek mythology. For this reason, we chose Cerberus to guard the "endpoint" of the level.

To create Cerberus, we extended Enemy.js Since Enemy.js has a built in feature that allows the image file (assuming you are using a image file and not a sprite sheet) to change directions based on which direction it is moving in. This is an extremely helpful feature for adding some detail to the visual aspect of the level itself.

Creating Chimera (the dragon)

Of course, with every normal goomba, there's also flying goombas. To match the ancient Greece theme throughout our level, we used Chimera as our flying goomba.

• In Greek mythology, Chimera is the fire-breathing monster that destroys two districts of Greece, until it is slain by a warrior. In the same way, Chimera blocks the pathway to the endpoint of the level until she is eliminated by the player.

To create Chimera, we extended the flying goomba enemy. We also added Chimera as an enemy in gamesetup.js so that it could be used in the game objects for our level.

dragon: { 
src: "/images/platformer/sprites/dragon.png", 
width: 152, 
height: 119, 
scaleSize: 60, 
speedRatio: 0.7, },

Similar to Cerberus, we coded our own "direction change" every time Chimera changed direction. We did this using the following code:

if (this.speed < 0) { 
this.canvas.style.transform = 'scaleX(1)'; } 
else { this.canvas.style.transform = 'scaleX(-1)'; }

Platforms

As for the platforms, we used the following image, a block of sandstone. We used this in the game objects, as shown below.

Endpoint

The endpoint of our level was the Greek flag. We had reduced the resolution in the level intentionally, so that it appears pixelated. We decided to do this to match the pixelated theme of our entire level, fitting in with the entire game, too!

Putting it all together

This was the final step of our game level. This was a fairly simple process as we had done this before with a (now scrapped) level for a previous assignment.

The bulk of this part was arranging the many sandstone blocks we had created, in the gameobjects. Once this had been done, our level was complete!

        // Greece Game Level definition...
        const greeceGameObjects = [
          // GameObject(s), the order is important to z-index...
          { name: 'greece', id: 'background', class: Background, data: this.assets.backgrounds.greece },
          { name: 'grass', id: 'platform', class: Platform, data: this.assets.platforms.grass },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.2, yPercentage: 0.82 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.2368, yPercentage: 0.82 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.2736 , yPercentage: 0.82 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.3104, yPercentage: 0.82 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.3472, yPercentage: 0.82 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.384, yPercentage: 0.76 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.4208, yPercentage: 0.70 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.5090, yPercentage: 0.64 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.5642, yPercentage: 0.34 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.5274, yPercentage: 0.34 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.4906, yPercentage: 0.34 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6, yPercentage: 1 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6, yPercentage: 0.94 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6, yPercentage: 0.88 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6, yPercentage: 0.82 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6, yPercentage: 0.76 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6, yPercentage: 0.70 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6, yPercentage: 0.64 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6, yPercentage: 0.58 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6, yPercentage: 0.52 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6, yPercentage: 0.46 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6, yPercentage: 0.40 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6, yPercentage: 0.34 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6, yPercentage: 0.28 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6, yPercentage: 0.22 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6368, yPercentage: 0.64 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6, yPercentage: 0.16 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6, yPercentage: 0.1 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.6, yPercentage: 0.06 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 1 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.94 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.88 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.82 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.76 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.70 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.64 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.58 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.52 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.46 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.40 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.34 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.28 },
          { name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.22 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.16 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.1 },
          //{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.06 },
          { name: 'cerberus', id: 'cerberus', class: Cerberus, data: this.assets.enemies.cerberus, xPercentage:  0.2, minPosition: 0.05, difficulties: ["normal", "hard", "impossible"]},
          { name: 'cerberus', id: 'cerberus', class: Cerberus, data: this.assets.enemies.cerberus, xPercentage:  0.5, minPosition: 0.3, difficulties: ["normal", "hard", "impossible"]},
          { name: 'cerberus', id: 'cerberus', class: Cerberus, data: this.assets.enemies.cerberus, xPercentage:  0.7, minPosition: 0.1, difficulties: ["normal", "hard", "impossible"]},//this special name is used for random event 2 to make sure that only one of the Goombas ends the random event
          { name: 'dragon', id: 'dragon', class: Dragon, data: this.assets.enemies.dragon, xPercentage:  0.5, minPosition:  0.05},
          { name: 'knight', id: 'player', class: PlayerGreece, data: this.assets.players.knight },
          { name: 'flag', id: 'flag', class: Flag, data: this.assets.obstacles.flag },
          { name: 'complete2', id: 'background', class: BackgroundTransitions,  data: this.assets.backgrounds.complete2 },
        ];

        // Greece Game Level added to the GameEnv ...
           new GameLevel( {tag: "ancient greece", callback: this.playerOffScreenCallBack, objects: greeceGameObjects} );