Detailed explanation of making shooting games with CocosCreator

Scene Setting

Game Resources

Turret rotation

Dynamically generated bullets

Collision Calculation

Increase the effect

Target movement

Added display of ammunition depot

Common public class

ResultDialog script (controls the score prompt box)

Common Scripts

Game Restart

Modify the Common script

Add some details

Added game sounds and changes to turret activation
Image Switch
Sound Effect Playback
Bullet Script

Scene Setting

Game Resources

Turret rotation

The mechanism is the same as the car in the previous handle instance, using touchmove to listen for touch events.

Get touch position
Use the signAngle method to find the angle difference between the position and the cc.v2(1,0) position (remember to add a negative sign, the counterclockwise comparison is negative, and the counterclockwise value of angle is positive).
The angle sought is the final angle.

 onLoad(){
        //Initialize to 90 degrees this.node.angle=90;
        this.node.on('touchstart',this.onTouchStart,this);
        this.node.on('touchmove',this.onTouchMove,this);
        this.node.on('touchend',this.onTouchEnd,this);
        this.node.on('touchconcel',this.onTouchConcel,this);
    }
   
    onTouchStart(e:cc.Event.EventTouch){
        //Get the starting position this.starPos=this.node.parent.convertToNodeSpace(e.getLocation());
        //Get the initial angle of the muzzle this.starAngle=this.node.angle;

    }
    onTouchEnd(e:cc.Event.EventTouch){

    }
    onTouchMove(e:cc.Event.EventTouch){
        //Get the current position of the touch point let pos:cc.Vec2=this.node.parent.convertToNodeSpace(e.getLocation());

        //Get the angle //angle is negative clockwise and positive counterclockwise let sweep_radian=pos.signAngle(this.starPos); //The angle of pos relative to starPose p is positive clockwise relative to s let sweep_angle=sweep_radian*180/Math.PI; //Convert the angle in radians //Let the turret point to the final angle let angle=this.starAngle-sweep_angle;
      
        //Limit the angle between 45 and 135 if (angle<45) angle=45;
        if(angle>135)angle=135;

        cc.log("Muzzle swing: "+sweep_angle+"Final angle position: "+angle);
        this.node.angle=angle;
    }

Dynamically generated bullets

Generate a node cc.Node and add a component addComponent(cc.Sprite)
Assign values to the component's properties and the image's spriteFrame
Mount the component under a parent node
Set position, angle, etc.
To control its movement, you can import the newly created script and add it to the component of the dynamically generated node.

 onTouchEnd(e:cc.Event.EventTouch){
        this.fire();
    }
    onTouchConcel(e:cc.Event.EventTouch){

    }

    fire(){

        if(this.bulleteicon==null)return;
        let bullet:cc.Node=new cc.Node();
        let sprite:cc.Sprite=bullet.addComponent(cc.Sprite);
        sprite.spriteFrame=this.bulleteicon;
        

        //Mount to the shooting system node bullet.parent=this.node.parent;

        //Set the relative position of the parent node let ration=this.node.angle*Math.PI/180;
        let direction=cc.v2(Math.cos(ration),Math.sin(ration));
        bullet.angle=this.node.angle;
        let r=100;
        bullet.setPosition(cc.v3(r*direction.x,r*direction.y,0));
       
        //Additional script component let script=bullet.addComponent(Buletet);
         script.explodeImg=this.explodeImg;
         script.direction=direction;

    }

 start () {
         this.schedule(this.onTimer,0.01);
    }

    onTimer(){
        if(this.node.y>300){
            this.unschedule(this.onTimer);
            this.explode();
           
            return;
        }
        let dx = this.direction.x * 5;
        let dy=this.direction.y*5;
        this.node.y+=dy;
        this.node.x+=dx;
    }

    explode()

        let sp:cc.Sprite=this.getComponent(cc.Sprite);
        sp.spriteFrame=this.explodeImg;
      
        //Shrink the bullet this.node.scale=0.1;
        //Explosion animation effect easing system let self=this;
        cc.tween(this.node)
            .to(0.5,{scale:1,opacity:0})
            .call(function(){
                self.afterExplode();
            })
            .start();

            
    }

    afterExplode(){
        this.node.destroy();
    }

This bug:

The imported class name is different from the file name, Note that renaming the file will not automatically change the class name in the code, so you need to modify it twice
When using the setposition() method, the parameters are written in the constructor of cc.v3. Be sure to pay attention to the position of the parameters.

Collision Calculation

Calculate the relative position of the bullet and the target. If it is less than the range, it is judged as hitting the target and the hit operation is performed. Otherwise, it is judged as not hitting the target and the not hitting operation is performed.

The script needs to pass in the target node and add the target attribute

   @property(cc.SpriteFrame)
    explodeImg: cc.SpriteFrame = null;
    
    direction: cc.Vec2 = null;

    target: cc.Node = null;
    onLoad() {

    }

    start() {
        this.schedule(this.onTimer, 0.01);
    }

    onTimer() {
        if (this.node.y > 350) {
            if (this.isHit()) {
                //Play explosion effect this.explode();
                console.log("Hit the target");
            }
            else {
                console.log("off target");
                this.disMiss();
            }
            this.unschedule(this.onTimer);
            return;
        }
        let dx = this.direction.x * 5;
        let dy = this.direction.y * 5;
        this.node.y += dy;
        this.node.x += dx;
    }

    //Judge whether it hits isHit(): boolean {
        let targetPos: cc.Vec2 = this.geWorldLocation(this.target);
        let selfPos: cc.Vec2 = this.geWorldLocation(this.node);
        let distance = Math.abs(targetPos.x - selfPos.x);
        console.log("target x=" + targetPos.x + " , bullet x=" + selfPos.x);

        if (distance < 50) {
            return true;

        }
        else {
            return false;
        }

    }
    explode() {

        let sp: cc.Sprite = this.getComponent(cc.Sprite);
        sp.spriteFrame = this.explodeImg;

        //Shrink the bullet this.node.scale = 0.1;
        // Explosion animation effect easing system let self = this;
        cc.tween(this.node)
            .to(0.5, { scale: 1, opacity: 0 })
            .call(function () {
                self.disMiss();
            })
            .start();


    }

    geWorldLocation(node: cc.Node): cc.Vec2 {
        let pos = node.getPosition();
        //Note that this is node.parent. The caller of the method should be the coordinate system of the current node return node.parent.convertToWorldSpaceAR(pos);

    }

    disMiss() {
        this.node.destroy();
    }

This bug:

When obtaining the world coordinates, the coordinate system of the parent node is not called, and the coordinate system of the current node is used, so the value returned is still the value of the current coordinate system itself. Remember that the method caller for converting world coordinates is the coordinate system of the current node, usually its parent node. return node.parent.convertToWorldSpaceAR(pos); (with the anchor point as the origin)

Increase the effect

Add a script under the target node to control the movement, move left and right, and add a text prompt effect when the bullet hits.

Text tips:

 cheer() {
        //Create a node and mount let node: cc.Node = new cc.Node();
        node.parent = this.node.parent; //Both are at the same level, with the same parent object let label: cc.Label = node.addComponent(cc.Label);
        label.string = "+10 points";

        //Set position, transparency, etc. node.setPosition(cc.v3(0, 250, 0));
        node.opacity = 200;
        node.color = new cc.Color(255, 0, 0);

        //Animation cc.tween(node)
            .to(0.5, { scale: 1.5 })
            .to(0.2, { opacity: 0 })
            .call(function () {
                node.destroy();
            })
            .start();

    }

Target movement

 update (dt) {
         let speed=3;
         if(this.isLeft){
             speed=-speed;
         }
         this.node.x+=speed;
         if(this.isLeft&&this.node.x<-350){
             this.isLeft=false;
         }
         if(!this.isLeft&&this.node.x>350){
            this.isLeft=true;
        }
    }

Added display of ammunition depot

Added ammunition depot node to batch generate bullet images (position can be set using widget component)
Add a method to reduce bullets, and reduce bullets by setting the active property of the bullet image.
Call the method to reduce bullets in the turret's fire method

There are two calling methods. One is to get the ammunition depot node in the turret script and then call it. The other is to set a public class (static variable), initialize the node in the onLoad() method, and then call it directly. Use the latter.

 @property(cc.SpriteFrame)
    bulleteIcon: cc.SpriteFrame = null;
    capacity: number = 10;
    stockNumber: number = 10;


    onLoad() {

        let space: number = this.node.width / this.capacity;
        for (let i = 0; i < this.capacity; i++) {
            //Generate picture let bulleteNode: cc.Node = new cc.Node();
            let bulleteSprite: cc.Sprite = bulleteNode.addComponent(cc.Sprite);
            bulleteSprite.spriteFrame = this.bulleteIcon;
            this.node.addChild(bulleteNode);

            //Set position bulleteNode.x += space * i + 10;
            bulleteNode.y = 0;

        }

    }

    start() {

    }

    consum(num: number) {
        this.stockNumber -= num;
        if (this.stockNumber < 0) {
            this.stockNumber = 0;
        }
        this.display();
    }

    display() {
        let nodes: cc.Node[] = this.node.children;
        console.log(nodes.length);
        for(let i=0;i<nodes.length;i++){
            if(i>=this.stockNumber){
                nodes[i].active=false;
            }
           
        }
    }

Common public class

  //Static class, global variable, define all common variables and classes in the Common class static ammo:Ammo=null;

    onLoad() {
        Common.ammo=cc.find('Canvas/Ammunition').getComponent('Ammo');
        console.log(Common.ammo);
    }

Here is the bug:

Remember to use the slash for division in the cc.find() method.

Bullet exhaustion prompt score

Create a mask layer, import the script class into the Common class, and set the active property to false
Add the show method to the ResultDialog script, set its active property to true and display the score on the screen.
In Bullete (the script that controls the movement of bullets), determine whether the number of bullets is <= 0, and call the show method in Common to display the score prompt box.

ResultDialog script (controls the score prompt box)

 onLoad () {
         let replay:cc.Node=cc.find('Canvas/end prompt box/play another game');
         console.log(replay);
         replay.on('touchstart',this.dismiss,this);

         this.node.on('touchstart',this.onTouchdisable,this);
         this.node.on('touchmove',this.onTouchdisable,this);
         this.node.on('touchend',this.onTouchdisable,this);
   
     }

     //Show prompt box show(){
        this.node.active=true;  
        let scoreNode : cc.Node = cc.find('score box/score', this.node);
        let scoreLabel : cc.Label = scoreNode.getComponent(cc.Label);   
        scoreLabel.string = Common.score + 'points';   
       
        
     }

     //Hide the prompt box dismiss(){
         this.node.active=false;
     }

     //Shield onTouchdisable when mask is displayed (e: cc.Event.EventTouch) {
         e.stopPropagation();
     }
    start () {

    }

Common Scripts

 //Static class, global variable, define all common variables and classes in the Common class static ammo:Ammo=null;
    static score : number = 0;
    static resultdialog : ResultDialog = null;
  

    onLoad() {
        Common.resultdialog=cc.find('Canvas/End prompt box').getComponent('ResultDialog');
        Common.ammo=cc.find('Canvas/Ammunition').getComponent('Ammo');
    }

Increase the score in Bullete method

  if (this.isHit()) {
                //Play explosion effect this.explode();
                //Show +10 points this.cheer();
                //Total score +10
                Common.score += 10;
                console.log("Hit the target");
            }

Game Restart

This game is relatively simple. To restart it, you only need to reset the ammunition depot node. Therefore, the reset method is placed in the Ammo script. Create an Ammo object in the public class, set a static method, reset the score, and call Ammo's reset method.

Ammo (ammunition depot) script added

 reset(){
        this.stockNumber=this.capacity;
        this.display();
    }

Modify the Common script

 //Static class, global variable, define all common variables and classes in the Common class static ammo:Ammo=null;
    static score : number = 0;
    static resultdialog : ResultDialog = null;
  

    onLoad() {
        Common.resultdialog=cc.find('Canvas/End prompt box').getComponent('ResultDialog');
        Common.ammo=cc.find('Canvas/Ammunition').getComponent('Ammo');
        console.log(Common.ammo);
    }
    static resetGame() {
        Common.score=0;
        Common.ammo.reset();
    }

Add some details

Added game sounds and changes to turret activation

1. Added properties to the turret script

 //Sound effect @property(cc.AudioClip)
    audioFire: cc.AudioClip = null;
    @property(cc.AudioClip)
    audioExplode: cc.AudioClip = null;

    //turret image @property(cc.SpriteFrame)
    iconNormal: cc.SpriteFrame = null;
    @property(cc.SpriteFrame)
    iconActive: cc.SpriteFrame = null;

Image Switch

 onTouchStart(e: cc.Event.EventTouch) {add at the end of the method //Switch the turret image to active this.node.getComponent(cc.Sprite).spriteFrame = this.iconActive;

 onTouchEnd(e: cc.Event.EventTouch) {method finally added //image restoration this.node.getComponent(cc.Sprite).spriteFrame = this.iconNormal;
      }

Sound Effect Playback

fire(){ Add after the method //Send the bullet explosion audio to the bullet script script.audioExplode = this.audioExplode;
 if (this.audioFire != null) {
            cc.audioEngine.play(this.audioFire, false, 1);
        }
    }

Method for playing audio: ==cc.audioEngine.play(this.audioFire, false, 1); ==The second parameter is whether to play in a loop, and the third parameter is the volume

Bullet Script

//Add attribute @property(cc.SpriteFrame)
explodeImg: cc.SpriteFrame = null;
Add if(this.audioExplode!=null){
	cc.audioEngine.play(this.audioExplode,false,1);
}

The above is a detailed explanation of how to make shooting games with CocosCreator. For more information about CocosCreator shooting games, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: