This is the 8th day of my participation in Gwen Challenge

sequence

After learning part of piXI before, I still hope to write something different from others, so I will skip the articles about collision detection

Now the king of boxing in the small game is flash because of the reason, in my computer above has not played. Can I make a copy? It’s fun to think about it. Too young for that

(Brain: I can hand: No you can’t!!)

Use pixi. Js to do a boxing emperor game, I gradually found that there are a lot of things you need!

At present, the simplest experimental product NO1 is made, with only the simplest moves of forward, backward, jump, squat, run, light fist, heavy fist, light foot, heavy foot

Here’s what it looks like so far: GIF images are displayed separately because of upload size limits

Initialization and forward

Back and jump

Squats and runs

Light and hard punches

Light feet and heavy feet

 

The text start

Material source

The source of the material is still aigi.com, of course I downloaded the GIF from aigi.com, by breaking the GIF into frames and using TexturePacker TexturePacker to make Sprite images

Here is my VUE page and processed material, if you want to use, but also need to configure their own files and relative position

Link: pan.baidu.com/s/1zYaLQTRd…

Extraction code: 7FBD

 

The basic layout adds this part and the previous “want to make a web game how to do? PixiJs (2)” more similar

First, create the Pixi.application scenario

initState() { this.loader = new pixi.Loader(); This. app = new pixi.Application({width: window.innerwidth, // default: Antialias: true, // default: false transparent: Resolution: 1, // default: 1 resolution backgroundAlpha: 0}); this.app.renderer.backgroundColor = 0x000000; document.getElementById('game1').appendChild(this.app.view) this.app.renderer.view.style.display = "block"; this.app.renderer.view.style.marginLeft = "30px"; this.app.renderer.autoResize = true; this.bumpInit(); ScaleToWindow (this.app.renderer.view); }Copy the code

And then create an add Sprite method,

let bg = './gameImg/bg.png', start = './gameImg/start.png', stand = './gameImg/stand.png', walkqian = './gameImg/walkqian.png', walkhou = './gameImg/walkhou.png', setdown = './gameImg/setdown.png', jump = './gameImg/jump.png', run = './gameImg/run.png', attack = './gameImg/attack.png';
this.loader.add([{name:'bg'.url: bg}, {name:'start'.url: start},{ name:'stand'.url: stand },{ name:'walkqian'.url: walkqian } ,{ name:'walkhou'.url: walkhou }, { name:'setdown'.url: setdown }, { name:'jump'.url: jump }, { name:'run'.url: run } , { name:'attack'.url: attack }]).load(() = >{
  
    // Specify the add event
    // Define a SpriteUtilities, where this.$SpriteUtilities is imported in main.js
    let sput = new this.$SpriteUtilities(pixi);
 
})
Copy the code

Add the spriteUtilities global to main.js. Here I have added export default spriteUtilities to spriteUtilities.

import SpriteUtilities from './assets/spriteUtilities'
Vue.prototype.$SpriteUtilities = SpriteUtilities   // put SpriteUtilities in the global
Copy the code

 

Combat scene add scene Sprite creation is also relatively simple, here pay attention to set the width and height of the scene Sprite to the same screen

Use animationSpeed to adjust the Sprite’s speed, and note that the play() method is activated to make the Sprite move

// Create a texture array to turn the Sprite image into a texture array 624, 384
// Create a battle scene
let bgframes = sput.filmstrip(bg, 624.384);
let bgsprite = sput.sprite(bgframes);
bgsprite.width = window.innerWidth;  // The scene Sprite is the same width and height as the screen
bgsprite.height = window.innerHeight;
bgsprite.animationSpeed = 0.1;  // Adjust the speed
bgsprite.play();  // Make the sprites move
// Sprites join the scene
this.addSprite(stage, [bgsprite])
Copy the code

Effect of scene

 

Because there are a lot of Sprite images, if you write like adding a battle scene, it will be a lot of repetition. So here you can encapsulate a method to create a character Sprite

// Encapsulate the Sprite creation method
createSprite(sput, spng, pwidth, pheight, width, height, animationSpeed, isshow, name, wheight) {
    let playerframes = sput.filmstrip(spng, pwidth, pheight);  // Parse the Sprite image
    let sprite = sput.sprite(playerframes);
    sprite.width = width;   // Set the Sprite width and height
    sprite.height = height;
    sprite.animationSpeed=animationSpeed; // The Sprite movement speed
    sprite.position.set(82, wheight * 0.93 - sprite.height)  // The Sprite's initial position
    sprite.visible = isshow;  // Whether sprites are displayed
    sprite.name = name   // The Sprite alias
    return sprite;
}
Copy the code

This allows you to create a large number of sprites in a way like the following

Because it’s not a complete Sprite, there are differences between the movements. So the size of the Sprite need to pay attention to, this may need to debug their own, the difference is more obvious

// The characters advance
let walkqiansprite = this.createSprite(sput, walkqian, 68.104.210.288.0.2.false.'walkqian', wheight)
// The character backs up
let walkhousprite = this.createSprite(sput, walkhou, 70.107.210.288.0.2.false.'walkhou', wheight)
// The character squats
let setdownsprite = this.createSprite(sput, setdown, 65.64.200.195.0.2.false.'setdown', wheight)
// The figure jumps
let jumpsprite = this.createSprite(sput, jump, 68.190.210.570.0.3.false.'jump', wheight)
// Characters run
let runsprite = this.createSprite(sput, run, 123.90.350.270.0.3.false.'run', wheight)
playersCont.addChild(walkqiansprite);
playersCont.addChild(walkhousprite);
playersCont.addChild(setdownsprite);
playersCont.addChild(jumpsprite);
playersCont.addChild(runsprite);
Copy the code

 

The switch of the action Sprite is different because it is a different Sprite, so the action of the character controlled by the player will need to be switched differently. I added the characters and sprites to a Container() collection

Display different character actions by controlling the visible invisibility of sprites in Container().

Here’s a look at the pixi.js API, how to determine the end and start of a Sprite animation, and which frame of the current animation is running. In this way, you can judge the different actions of switching

Pixi.animatedsprite Action state

There are many methods and attributes of motion state here, which can be referred to

AnimatedSprite Property table Property name Default value animationSpeed

1 animation speed, that is, frame change speed autoUpdate

Whether to automatically update the animation time currentFrame with pixi.ticker.shared

The frame number loop currently running AnimatedSprites

True Whether the animation loops onComplete

When the animation Sprite finishes playing, the user specifies the function to call

animation.onComplete = function () { // finished! };

onFrameChange 

When AnimatedSprite changes the texture to render, the user specifies the function onLoop to call

When the loop is true, the user specifies the function to call, plays the animation Sprite, and loops to restart playing

Checks if the current animation is playing textures

The texture array totalFrames for this animation Sprite

0 Total number of frames for the current animation Sprite updateAnchor

False When the frame changes, update the anchor point to the texture’s defaultAnchor.

Useful for animating Sprite drawings created using tools. Changing the anchor for each frame allows the Sprite origin to be fixed to certain movement features of the frame (such as the left foot).

Note: Enabling this option overrides any positioning previously set on each frame change

 

Example: Change the animation Sprite in the onComplete animation end event after the character’s initial action disappears. Playersprite. loop = false;

// Display the character standing after the initialization animation
playersprite.onComplete = () = > {
   playersCont.removeChild(playersprite);
   playersCont.addChild(standsprite);
   this.currIndex = 'stand'
   standsprite.play();
   this.keyMove(playersCont);
}
Copy the code

 

The same principle applies to the button switching action after the button switching. For the button control action, please refer to:

Want to make a web game how to Do?

Learning PixiJS — Sprite State

 

The keyboard method determines which key is pressed

let left = keyboard('a'), up = keyboard('w'), right = keyboard('d'), down = keyboard('s'), quanattack1 = keyboard('u'), jiaoattack1 = keyboard('i'), quanattack2 = keyboard('j'), jiaoattack2 = keyboard('k');
Copy the code

Example: Pressing the A key on the keyboard changes the character from standing to walking backwards. Use getChildByName to get the current Sprite, and use Visible to change visibility

Adjust the VX to change the location of the Container

// Press key A
left.press = () = > {
    playersCont.getChildByName(this.currIndex).visible = false;
    playersCont.getChildByName('walkhou').visible = true
    playersCont.getChildByName('walkhou').play();
    this.currIndex = 'walkhou';
    playersCont.vx = -4;
};
// Release the button
left.release = () = > {
    playersCont.vx = 0;
    playersCont.getChildByName(this.currIndex).visible = false;
    playersCont.getChildByName('stand').visible = true;
    this.currIndex = 'stand';
};
Copy the code

Of course in the key switch, there are a lot of judgments or more troublesome

For example, the switch of the running animation is actually achieved by pressing the D key twice in a row, so I need to judge whether the key is clicked continuously.

The interval between pressing the D key is greater than 0 and less than 600ms

There are like jumping action, need this jump action after the end of the next jump action, otherwise it will become very ghost livestock

let ot = 0;
right.press = () = > {
    // getChildAt index getChildByName Name
    playersCont.getChildByName(this.currIndex).visible = false;
    playersCont.getChildByName('walkqian').visible = true
    playersCont.getChildByName('walkqian').play();
    this.currIndex = 'walkqian';
    playersCont.vx = 4;
    // Determine whether to double-click
    let nt = new Date().getTime();
    let ct = nt - ot;
    if (ct > 0 && ct < 600) {
        playersCont.getChildByName(this.currIndex).visible = false;
        playersCont.getChildByName('run').visible = true
        playersCont.getChildByName('run').play();
        this.currIndex = 'run';
        playersCont.vx = 12;
    }
    ot = nt;
};
Copy the code

 

Normal action:

Monster action:

 

In fact, in this part of the key switch judgment, need to do a lot of judgment, such as attack judgment and so on, the current is just completed the most basic part, after all, although Pixi performance is relatively high, but the development cost of some methods need to improve.

 

section

There is a long way to go, but as for making front-end games, I learned pixi.js, which is just my own practice. After all, it is convenient for Cocos Creator and Unity to make real games.

If I finish my study plan and really learn front-end games, the target will be Cocos Creator