『24年01月05日』

cocos阶段性总结

使用cocos框架制作游戏!

飞机大战

  经过5节的学习制作了飞机大战的demo,效果图如下:
demo pic
  编辑器使用的是cocosCreator2.4.12,如下图:
cocosCreator2.4.12

涉及到的知识点:

名词介绍

  • 画布(Canvas):引擎一帧一帧渲染其中的内容
  • 相机(Camera):相机组件所包含的内容就是是最终游戏画面所显示的内容
  • 节点(Node):
    Node
    各类资源在画布中的名称。节点属性记录了该资源的一些基础属性,如位置,缩放,宽高。各个节点以树状结构联系在一起。
  • 锚点(Anchor):计算节点位置所依赖的点,(0.5,0.5)表示节点的中心点
  • 坐标(Position):节点的锚点在父节点中的位置,遵循笛卡尔坐标系,(0,0)表示居中
  • 组件(Component):
    Component
    可以挂载在节点上的属性或功能。比如拖拽ts脚本可实现脚本与节点的绑定;也可以点击’添加组件’按钮给节点绑定如’碰撞’,’动画’等
  • 场景(Scenes):节点组成场景
  • 预制体(Prefab):将绑定好脚本,组件,设置好大小位置的节点拖拽到下方资源管理器中就成了预制体,食用方法:先加载后挂载

移动控制

通过改变节点的position来实现节点的移动,(相对于父节点)

1
2
this.node.x = x
this.node.y = y
在子弹飞出的场景下,子弹离开飞机后直直向上飞行,此时:
1.子弹不能是飞机的子节点,否则飞机的移动会影响子弹的移动

输入控制

键盘输入:

1
2
3
4
5
6
7
8
9
10
11
12
13
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN,this.onKeyDown,this)  //在onLoad()中绑定
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP,this.onKeyUp,this)

cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN,this.onKeyDown,this) //在onDestroy()中解除绑定
cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP,this.onKeyUp,this)

onKeyDown (event){
switch(event.keyCode){
case cc.macro.KEY.a:
this.accLeft = true;
break;
}
}

鼠标输入:

1
2
3
4
5
6
7
8
9
10
11
this.node.on(cc.Node.EventType.TOUCH_MOVE,this.onTouchMove,this)  //在onLoad()中绑定

this.node.off(cc.Node.EventType.TOUCH_MOVE,this.onTouchMove,this) //在onDestroy()中解除绑定

onTouchMove(event:cc.Event.EventTouch){
let dif = event.getDelta() //该方法获取触点距离上一次事件移动的距离对象,对象包含 x 和 y 属性。
let newPos = this.node.parent.position.add(new cc.Vec3(dif.x,dif.y,0)) //给飞机节点位置加上移动位置
this.node.parent.position = newPos
}
//this.node是飞机的一个子节点,大小超出整个屏幕,意在实现拖动屏幕任意位置都能试飞机移动

碰撞与动画

给节点添加碰撞:
1. 添加碰撞组件,选择碰撞外形
2. 在节点属性中设置分组,在项目设置中设置不同分组的碰撞规则
3. 在节点绑定的脚本中,添加碰撞回调
1
2
3
4
5
6
7
8
9
10
11
onCollisionEnter(other,self){
let anim = this.getComponent(cc.Animation)
anim.play() //播放默认动画
// anim.play('blast',1) //播放某一个动画,播放一遍
self.destroy()
// self.node.parent.removeChild(self.node)
//console.log('发生了碰撞',other,self)
//在发生碰撞的节点上会触发该回调,两个传参表示对方节点和自身节点
//碰撞发生后播放爆炸动画,同时销毁自身,避免再次发生碰撞
//destroy并不会将素材从画面中移除,将节点从父节点中移除才会将节点图片从画面中移除。
}

给节点添加动画:

  1. 几个关键帧连续播放就形成了动画
  2. 可以在动画播放过程中添加回调,比如播放完成后执行节点移除操作。
    Animation

常用方法

『24年01月04日』

how to use hexo

这篇博客总结一下hexo的基础使用方法。先学会模仿使用,然后可以自定义

『24年01月03日』

Hello World

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment