Cocos Creator H5 小游戏 实例教程-消灭病毒

2-1

自我介绍自我介绍- 潘旭- 1983-2019 = 36 - 13-14年左右游戏开发.- 在沈阳**的棋牌 创胜 公司担任技术总监.- 麻将,斗地主,砸金花,捕鱼,水果机.等....- 这套视频以实战为主.js javaScript 视频教程,网页前端.js的语法.- 优点是能学到很多东西.- 缺点时间有点长.- 2017年录的视频教程天天酷跑.CocosCreator - 学习心得,一定要跟着写代码.- 要有基础.不管什么语言.

2-2

游戏解析游戏解析主界面- 金币,闪电,钻石- logo- 关卡- 点击领取- 飞机- 武器系统- 副武器系统- 金币系统- 游戏设置- 广告系统游戏内界面- 整体病毒血量.- 关卡数- 当前金币- 病毒剩余百分比- 敌人:病毒- buf- debuf结算界面- 关卡- 闪电- 赚取的金币- 幸运大奖(广告)- tip游戏玩法控制飞机躲避病毒,并且发生子弹,消除病毒的数量. 每种病毒,特性不同.- 游戏设置- 广告系统游戏内界面- 整体病毒血量.- 关卡数- 当前金币- 病毒剩余百分比- 敌人:病毒- buf- debuf结算界面- 关卡- 闪电- 赚取的金币- 幸运大奖(广告)- tip游戏玩法控制飞机躲避病毒,并且发生子弹,消除病毒的数量. 每种病毒,特性不同.

2-3

开发工具1游戏引擎- CocosCreator- https://www.cocos.com - V2.0.10 版本- 关心论坛.多逛逛,有问题可以提问.代码编辑- VSCode- 比较火的代码IDE- 谷歌浏览器.资源编辑器- TexturePacker ,plist 生成器- ShoeBox :生成艺术字,拆分图片.资源提取器- platform-tools 解压出来放到C:\- win键+R 打开cmd- 输入adb 不是内部命令- C:\platform-tools 把这个路径配置到系统环境变量中- connect com.kunpo.viruswar.jrtt 资源处理- 用ps打开图片- 选择通道- ctlr+鼠标左键- 回到图层- ctrl+j- 另存png- shoeBox 裁切图片- 单独处理每张图片

2-4

前期准备前期准备文档- 策划提供给你具体的文案.- 原型图.- 策划文档,就是游戏本身.- 制作目标100%还原.资源- 图片- 文字- 动画- 效果图,游戏本身.代码- CocosCreator ,跨平台,网页,安卓,苹果,小游戏,- 语言:JavaScript,TypeScript,- 变量,循环,函数,类.编程基础.c/c++ ,java ,- B站 JS 语言.很多免费教程- 点击率最高.

2-5

开发工具2

2-6

引擎讲解1CocosCreator介绍- 范例集合,非常关键,重头看到尾- assets 所有的文件都要放到这里.- 尽量在编辑器里处理文件.- 鼠标右键按下,挪动视角- 鼠标滚轮,上滚放大,下滚缩小,以当前鼠标所在位置为基准- 绿色箭头是Y轴位置,向上+,向下-- 自身坐标系- 世界坐标系有时间再讲.- 红色的X轴,左是-,右是+- 组件,引擎的空间都是node挂载相应组件产生.- 引擎是以组件来驱动.- 设置默认浏览器,默认代码IDE

2-7

引擎讲解2

2-8

引擎讲解3

2-9

创建工程创建工程 - 范例集合,都要看一遍.做到心里有数.- 创建scene文件夹,保存GameView.fire文件.- 创建文件夹放图片,texture- 移动,旋转,缩放.

「仅限付费用户」点击下载“工具+资料.rar”

3-1

精灵图片 Sprite精灵图片 Sprite- 游戏都是有资源图片组成的.- 调整Canvas画布大小,720 1280- 自动宽和自动高,选者上的时候,游戏画布会自动适配手机分辨率- 通过调整color,使自身白色图片改变颜色.- 九宫格,通过一张小图片,可以无限放大. - 必须是缩放位置是单色的图片 - sliced - 分为9个区域,四个角是不会进行任何缩放的. - 上下中间的区域是左右缩放 - 左右区域上下缩放 - 中心位置全方位缩放.

3-2

拼接场景top拼接场景- 把需要的资源文件拷贝到,res文件夹下- 用texturePacker 制作成plist图集.- 用引擎创建plist文件夹.- 将生成的png,plist拷贝到plist文件夹下.- 看视频.- 子节点的属性跟随父节点变化而变化1.按钮过度状态- none:什么都不做.- color:用颜色来改变状态.- sprite:用图片来改变转改- scale:用缩放改变状态

「仅限付费用户」点击下载“008.拼接场景top.rar”

3-3

拼接场景logo1

「仅限付费用户」点击下载“009.拼接场景logo.rar”

3-4

拼接场景logo2

「仅限付费用户」点击下载“009.拼接场景logo.rar”

3-5

场景拼接-关卡

「仅限付费用户」点击下载“010.场景拼接-关卡.rar”

3-6

领取金币

「仅限付费用户」点击下载“011.领取金币.rar”

3-7

设置按钮

「仅限付费用户」点击下载“012.设置按钮.rar”

3-8

进度条进度条- 左右进度.- 上下进度- 圆形,扇形- 首先设置sptrite属性,filled- filld type:radial 填充模式改成扇形- 添加组件:progressBar

「仅限付费用户」点击下载“014.进度条.rar”

3-9

九宫格九宫格,通过一张小图片,可以无限放大.- 必须是缩放位置是单色的图片- sliced- 分为9个区域,四个角是不会进行任何缩放的.- 上下中间的区域是左右缩放- 左右区域上下缩放- 中心位置全方位缩放.

「仅限付费用户」点击下载“013.九宫格.rar”

3-10

飞机

「仅限付费用户」点击下载“015.飞机.rar”