Cocos Creator 极速入门

课程亮点

  • 紧扣最新版特性解读,比官方文档更详实
  • 官方范例源码解析,实战中掌握功能用法
  • 实操个人游戏项目,由理论进阶实践应用
  • 走通研发完整流程,快速上手 H5、小游戏开发

专家推荐

该课程对 Cocos Creator 官方实例工程做了详尽解说,并从作者多年引擎开发经验的角度,深入分析了其中的技术要点。对于想要快速掌握 Cocos Creator 功能用法的开发者,这是一个很不错的参考资料。

——王哲,Cocos 引擎创始人

对于大多数有经验的游戏开发者,本课程能帮助他们快速掌握 Cocos Creator 各大功能用法。内容从入门到实践,有完整的课程体系,在此,推荐给感兴趣的小伙伴。

——沈大海,Cocos 知名技术专家、区块链创业学院院长

我一直坚持一个学习方法,20% 的探究,80% 的实战,《Cocos Creator 极速入门》以入门为辅,实战为主,不仅仅讲解了 Cocos Creator 的使用,更是对官方教学案例的一个重要补充。

——凌建风,厦门风领科技 CEO、《Cocos2d-JS 游戏开发》图书作者

课程背景

游戏引擎封装了开发所需的各类工具,将开发者从底层功能研发中解脱出来,让他们更加专注于业务逻辑的实现。Cocos Creator 由 Cocos 推出,提供了整个游戏研发工作流中所需的全部功能,成为开发者基于 Cocos 引擎开发游戏的核心工具。

学习 Cocos Creator,大家首先想到的是官方文档。它提供了一系列经典实例,但缺乏必要的解读说明,初学者难以掌握。为此,本达人课将以官方案例为切入点,通过对一个个鲜活实例的讲解,带初学者全面体系化了解 Cocos Creator 核心基础知识,实现快速入门。随后,通过两个小型游戏项目的搭建,引导大家将基础知识灵活应用到项目实战开发中,真正达到对 Cocos Creator 的熟练应用,最终独立完成自己的小型休闲游戏。

作者介绍

卞安,网名红孩儿,CSDN 博客专栏作者,曾担任无限时空网络科技引擎总监、触控科技 Cocos 引擎总监,主持开发过多款自研引擎,在 CSDN 学院已开设多门课程,广受学员好评。

课程大纲

适宜人群

  • Cocos Creator 初学者
  • 希望进入 H5 领域的 Cocos 游戏开发者
  • 希望从事小游戏开发的技术人员

课程内容

开篇词:Cocos Creator 那些事儿

在正式介绍 Cocos Creator 技术细节之前,我们先来讲讲它的过去、现在和将来,以对这款优秀产品的发展历程有个基本了解。

Cocos Creator 的诞生

过去的辉煌时代

十年前,移动游戏火爆发展,并成为新的内容变现领域。当时,主流商业游戏引擎大多仍以面向 PC 端(Windows 系统)游戏研发为主,在移动平台上尚未有所动作。移动游戏引擎市场仍是一片空白,面对这一巨大机遇,各大游戏开发商纷纷推出了适合小团队快速上手的跨平台游戏引擎,Cocos 便是其中的一款。

最初的 Cocos 引擎,也只是一套相对简陋的跨平台图形引擎底层库。创业团队使用它开发游戏产品,基本需要自己设计和搭建产品框架。工作流的建立也要依靠有经验的主程序员,基于产品需求,缺什么补什么,往往需要花费大量的精力。好在十多年来 PC 端网络游戏的火热催生了大量有经验的 C++ 程序员,当他们面对工程量较小的 2D 手游研发时,基本没有太大的压力,这样一套 2D 功能完整、有 Lua 脚本支持、代码开源、可随意修改扩展的 C++ 游戏引擎库,对他们来说已经足够了。

当下的转危为安

随着游戏产品竞争日益加剧,用户对游戏品质的要求越来越高,之前仅限于 2D 图形显示的游戏引擎已无法满足开发者的需要。激烈的市场竞争也对游戏引擎的专业化、流程化提出了更高要求。

这个时期,有数十年积累的商业化引擎 Unity 以其完整的一体化编辑器所搭建起来的工作流、2D/3D 全兼容的内容、方便快捷的操作体验、脚本化语言的开发方式,以及较低的价格,逐渐在移动游戏开发领域中成为主流。

紧随其后,Cocos 引擎团队敏锐地发现了手游页游化这一趋势,并做出了一个大胆的尝试——开发类 Unity 工作流的一体化工具 Cocos Creator,它以页游主流脚本 JavaScript 为开发语言,能够同时打包三端产品,还可帮开发者迅速过渡到当前流行的 H5 和微信小游戏研发领域。

Cocos Creator 到底是什么?

Cocos Creator 由 Cocos + Creator 两个单词组合而成,意指帮助我们创造基于 Cocos 引擎的产品。

Cocos Creator 提供了一套以内容创作为核心的所见即所得的编辑工具,拥有 All in One 一站式服务体系。整个游戏产品开发过程中,游戏创作团队完全可以身处其中,通过其所建立的工作流对游戏的资源管理、场景设计、界面布局、精灵创建、逻辑控制、打包运行与发布做全方位的把控。

它将跨平台游戏引擎底层功能高度集成在内核中,暴露在开发团队面前的,只有最接近游戏本身的编辑内容,比如游戏物件层级管理、场景编辑、资源管理、物件属性编辑及脚本逻辑驱动等。这样有利于开发者将精力专注于游戏逻辑本身,开发工作更加顺畅与清晰。Cocos Creator 的技术架构如下图所示(图片来源于官网):

技术架构

与之前 Cocos 产品的开发方式不同,Cocos Creator 在 Cocos2d-x 基础上实现了彻底脚本化、组件化和数据驱动等特点,极大提升了 Cocos 开发者的工作效率,实现了以内容创作为核心的工作方式。

《Cocos Creator 极速入门》

脚本化

早期的 Cocos 程序员,大多基于 C++ 进行游戏开发。C++ 虽然强大,但对程序员的能力要求较高,况且硬写的代码很难灵活改动,程序逻辑功能也不便于自更新。

而 Cocos Creator 使用 JavaScript 作为脚本语言,一则降低了开发难度和开发成本,同时也方便运行和调试,轻松涵盖了 H5 领域的产品开发。

组件化

Cocos Creator 基于组件化设计,功能模块易于扩展。该模式使开发者不再拘束于编辑器本身这个容器,可以按需对编辑器进行插件式扩展,用 HTML + JavaScript 等前端通用技术轻松扩展编辑器功能,定制个性化的工作流程,极大提升了 Cocos Creator 的可扩展空间。

数据驱动

官方文档特别指出了“数据驱动”这一特点,但似乎并没给它一个明确的定义。结合大家的说法加上我的理解,我认为“数据驱动”是相对于“业务驱动”的另一种开发模式,即把游戏需要的美术资源、逻辑脚本等所有东西均当作数据,最终策划人员利用这些数据组装成产品。该模式可使开发工作流程更加顺畅,团队各成员分工更明确,协作更完美:

  1. 设计师为 Cocos Creator 制作并导入游戏所用的图片、动画、声音、字体等资源,编辑好需要用到的所有界面布局、场景、地形、角色、粒子效果,设置好对应的属性数值,使它们可以运行出应有的表现效果;
  2. 程序员为各个组件及层级节点编写脚本,驱动它们的逻辑功能;
  3. 策划师将所有的东西连接起来,形成有功能的界面、关卡,并最终输出为相应的游戏产品。

以数据驱动工作流为核心的开发理念,Cocos Creator 让不同职能的开发者能够快速找到最大化自己作用的工作切入点,并能够默契流畅地和团队其他成员配合。整个工作流程如下图所示(图片来源于官网):

工作流说明图

Cocos Creator 的优势与不足

国内多款 H5 游戏引擎,我都有一定的使用经验。每款引擎都有自己擅长的方向,也都有其薄弱的地方。这里我们简单来说说 Cocos Creator 的优势和不足。

总结 Cocos Creator 的优势,主要包括以下几点。

1. 良好的工作流

Cocos Creator 的工作流借鉴了 Unity 等成熟引擎工具的设计方案,这使得用过 Unity 引擎的开发者可以迅速上手 Cocos Creator 而没有不适感。

开发者可以在 Cocos Creator 和 Unity 两者间随性转换,使用久了,你或许会发现,做 3D 选用 Unity,做 2D 选用 Cocos Creator,两者犹如同一个产品的两种不同形态,这种感觉非常酷。

2. 便捷的发布支持

Cocos 引擎不只在开发上提供引擎和工具支撑,在各类 SDK 对接上也提供全方位服务,Cocos Creator 通过其打造的 AnySDK 可让开发者方便对接渠道 SDK 和广告 SDK,开发团队在完成游戏产品后做一些简单的配置,就可以快速发布了。

当然,Cocos Creator 也有不足的地方,比如 3D 功能仍处于初级研发阶段,未能形成生产力,另外在工具的细节功能上还需进一步完善。

未来的无限可能

Cocos Creator 在 H5 领域从布局到今天已走过多个年头了。依靠 Cocos Creator,中小团队可以快速开发大量轻度 H5 或微信小游戏。Facebook 已授权 Cocos 为旗下 H5 游戏平台合作伙伴,Cocos Creator v1.9 发布时已增加了对 Facebook Instant Games 的支持,这无疑可以帮助有志于走向海外的开发团队快速上线 Facebook 平台产品。

据悉,2018 年 3月,Facebook Instant Games 正式发布时,首发 Facebook Instant Games 平台的国内游戏有 24 款,其中 Cocos 引擎作品占比达 54%,如下图所示(图片来源于官方博客):

前不久,Cocos Creator v2.0 版发布,添加了基于 3D 引擎的新渲染器,这将为 3D 游戏开发提供更大便利。下面是官方使用 Cocos Creator 开发的 3D 游戏截图。

此外,Cocos 也开始了区块链领域的大力探索,筹划发布 Cocos 公链,游戏厂商可在上面发行自己的二级数字币,并自由交易,而这一切也将在 Cocos Creator 上进行。

(注:图片来源于 CocoaChina

这些技术将逐步随着 Cocos Creator 的版本更新不断放出来,有兴趣的读者可以保持关注。

课程内容

到这里,相信大家对 Cocos Creator 已有了基本的了解。接下来的课程,我将向读者全面而系统地深入讲解 Cocos Creator 各个技术细节,通过四大部分分阶段学习,带大家循序渐进地走通游戏产品开发的整个过程。

第一部分,从“HelloWorld”入手,完整讲解一个最简单的范例,让大家理解 Cocos Creator 基本开发流程。

第二部分,逐一讲解 Creator 范例集合工程,通过数十个小功能实例让开发者对 Cocos Creator 各功能模块有一个系统的学习,全面的掌握。

范例集合

第三部分,由浅入深解析一系列游戏实战案例,带大家进阶到熟练应用。在这个阶段,我们首先对官方的《接星星》《21点》两个案例进行系统讲解,之后带大家完成自己的小型休闲游戏。

第四部分,课程最后,我们学习如何对接 AnySDK 和微信小游戏,完成上线前相关渠道 SDK 的接入。

经过四个阶段的学习,开发者将从新手快速成长为可以独立开发项目的 Creator“老玩家”,迅速适应未来小游戏开发浪潮的需求。

初学者需要掌握的知识及学习建议

在学习 Cocos Creator 之前,建议读者先了解掌握 JavaScript 语言开发,特别是对类、对象、函数、回调处理等知识点有一个清楚的认识。可以参看知名 Cocos 技术专家凌建风撰写的《Cocos2d-JS 游戏开发》郑高强撰写的《Cocos2d-JS 开发之旅》,书中系统讲解了使用 JavaScript 开发 Cocos 游戏项目的相关知识。

学习 Cocos Creator,我们可以分两部分来进行,即 Cocos 的引擎代码和 Cocos Creator 的使用

  1. 如果你有一定的面向对象的编程能力,学习 Cocos 引擎代码时可以系统看看 Cocos C++ 或 JavaScript 的源码。这样,在具体编码时,你心中将明了该调用引擎的哪些类,需在源码基础上做哪些改进,等等。理解源码,有利于你在实际开发中对项目需求和技术实现做出客观评估。

  2. 关于 Cocos Creator,主要是工具的使用。目前 Cocos Creator 相关教程少之又少,官方帮助文档虽有一定帮助,但不够深入。本课程将对官方文档进行深入补充,以实例化方式对工具的各个部分进行详细讲解,大家可跟着课程来学习这部分内容。

写在最后

未来几年,Cocos Creator 将有理由成为辅助你创造产品的重要工作流支撑。如果你正在或打算使用 Cocos 引擎开发游戏,我们就现在开始吧!

点击了解《Cocos Creator 极速入门》

第01课:初识 Cocos Creator 之“Hello World”

开篇对 Cocos Creator 做了简单的介绍。本文将介绍正式使用 Cocos Creator 开发前的准备工作,主要内容包括:

  • 下载与安装
  • 创建第一个项目“Hello World”
  • 工作视图区域介绍
  • 拆解“Hello World”项目
  • 调试与运行

下载与安装

访问 Cocos Creator 官方下载地址,在这里很容易找到 “COCOS CREATOR”下载项。一般情况下,我们选择稳定版本即可,有兴趣体验最新版本的开发者,可以选“最新版本”,但这一版本可能会存在 Bug。

本课重点解析 Cocos Creator 2.0 最新版本,我们选择最左边 V2.0 版,根据自己的操作系统下载即可。下载完成后,运行安装程序,顺利的话,大概需要五六分钟,便可成功安装。

创建第一个项目“Hello World”

单击桌面上新生成的“Cocos Creator.exe”图标,启动 Cocos Creator,进入项目管理面板,如下图所示:

该面板上,有“最近打开项目”、“新建项目”、“打开其它项目...”、“帮助”四个选项卡。之前的历史项目记录会展示在“最近打开项目”选项卡的列表中,单击列表中的项目图标,会显示出“打开”按钮和“关闭”文字,单击即可打开或移除项目。

这次,我们单击“新建项目”选项卡,可以看到,Cocos Creator 提供了四种类型的项目模版,分别是“Hello World”、“空白项目”、“范例集合”、“Hello TypeScript"。如果您之前使用过 Cocos 引擎开发项目,相信比较熟悉 Cocos 引擎中的 Sample 目录,它包含了官方提供的各功能模块的使用范例。前三个项目模版,实际上对应着 Sample 目录中的 “Hello World”、“空白项目”,以及“cpp-tests”或“lua-tests”案例。

范例集合

单击“Hello World”项目图标,在目录地址中选择将要创建的目录,单击“新建项目”,稍等几秒后,便可开启 Cocos Creator 的工作视图,如下图所示。

《Cocos Creator 极速入门》

工作视图区域介绍

接下来,我将带大家初步认识下 Cocos Creator 工作视图中的各个组成部分。

层级管理器

左上部分是层级管理器,用于罗列当前场景中的所有节点及其父子关系树。

在 “Hello World” 的场景中,层级管理器共有五个节点,分别是 Canvas、Main Camera、background、cocos、label,分别对应了场景中的画布、摄像机、背景图、Cocos 图标精灵、文字。每一个场景都有一个默认顶层节点,命名为画布 Canvas。鼠标右键层级管理器任意地方,即可通过弹出的菜单为任意节点创建精灵、字体、UI 控件、粒子系统等子节点。

资源管理器

左下部分是资源管理器。工程创建完成,Cocos Creator 会在工程目录下自动生成 assets 目录,存放游戏所用的各类资源文件,并在资源管理器中罗列出来。

在“Hello World”工程的 assets 下,工程默认创建了 Scene、Script、Texture 三个目录,分别对应场景、脚本、图片资源。

当然,游戏开发所需的其它资源,都可放在 assets 目录中,资源管理器会及时将它们展示出来。需要注意的是,Cocos Creator 会自动为每一个资源文件或目录生成 meta 文件,且放在同级目录下,并以它们的名称来命名。该文件主要用来存放对应文件的版本及其它相关信息。不要随意删除它,特别当您使用 SVN 或 Git 进行版本协作时,需同时提交它,保证 Cocos Creator 正确加载资源,及资源信息的统一更新。

场景编辑器

中央 C 位为场景编辑器,主要用来摆放场景。将右边控件库中的控件图标拖进场景中,便可在场景中创建相应的节点。您也可以直接将资源管理器中的资源文件拖进来,Cocos Creator 将在场景中自动生成相应的资源节点。

场景视图

这种拖放式的操作,可高效快速地构建您想表达的场景。当然该工作可以交给美术同学来完成。

控件库

控件库用于管理可放入场景中的控件,内置控件包括精灵、文本、粒子系统、TiledMap 以及一些常用的 UI 控件。选择需要的控件拖动到场景主视图中,即可创建相应控件节点。

若这些内置控件无法满足需求,我们还可以扩展所需要的控件,将其放入“自定义控件”面板项里。添加控件的方法,可参考这里

属性检查器

当我们在层级管理器或者场景编辑器中选择任何一个节点时,场景编辑器右边会展开一个“属性检查器”面板,在这里可以设置节点对象的开放属性,比如位置、大小、缩放、旋转、锚点、颜色、透明度等。当然,不同的节点类型所展示的属性也会有所不同。比如 Canvas,它本身具有 Node 相关属性,除此以外,还有 Canvas 独有的分辨率属性。

另外,如果我们需要为一个节点对象添加 Cocos 引擎功能组件或自定义的脚本组件,可以通过下部“添加组件”按钮来设置。单击“添加组件”,可通过弹出的菜单,为节点增加相应组件功能,包括“碰撞处理”、“动画”、“物理”、“UI 组件”以及我们自己编写的脚本类组件。我们可以使用这种组件化取用的方式,灵活地扩展节点。下图展示了我在项目中所用到的一些脚本组件。

添加组件

控制台

控制台主要用于打印输出日志和错误信息,方便我们排查错误,假如 JavaScript 脚本中出现了一些错误,如下图所示,我在 onLoad() 函数语句前加入“xxx”,很明显,编译将不通过。

这时,我们会在控制台面板上看到如下提示错误:

此外,我们可以通过面板上的字体设置重新设置日志文字的样式,同时,也可将日志复制到文件中。

动画编辑器

在动画编辑器中,我们可进行基本的序列帧动画编辑,这部分内容在后面的开发过程中我们再具体讲解。如果想做更复杂的骨骼动画,我建议大家直接用 Spine,其处理动画的功能更加强大。

拆解“Hello World”项目

Cocos Creator 将设计与编码有机结合,但又让彼此互相独立。前面介绍了工作视图区域的各个组成,下面我们就来看看这些组成是如何有机结合在一起的。

层级管理器中单击“Canvas”,我们将在属性检查器中看到如上图所示的三部分信息。最上面是基类 Node 的基础属性,包括位置、旋转、缩放、锚点、大小、颜色、透明度、变形、分组信息(这是碰撞处理时区分各组是否互相碰撞的重要设置项)。中间是画布 Canvas 的独有属性,包括分辨率。这里请注意一个问题,当机型分辨率与所设置的分辨率不同时,如何适配呢?Cocos 引擎内置了几种常用规则,比如按横向或纵向分辨率进行等比缩放,抑或横、纵向同时等比缩放,且居中留黑边显示等。

第三部分是一个“Hello World”属性区域,用来显示该 Canvas 所挂接的 JS 组件,并显示该组件类所公开的接口属性及属性值。从上图中可以看出,Script 项展示的“HelloWorld.js” 为该项目挂接的 JS 组件,Lable 项展示的“lable”为组件公开的接口属性,Text 中的“Hello,World!”为 lable 的属性值。

Canvas 挂接 JS 组件的流程是这样的:单击下方“添加组件”按钮,在弹出的“添加用户组件”菜单中选择 Script 目录中的 JS 脚本组件类,组件类属性及属性值将同步显示在面板中,且属性值可做修改。菜单式操作方式可以让我们为一个对象很容易挂接多个脚本并传入参数。

接下来,我们结合 HelloWorld.js 源码,进一步了解“Lable”、“Text”所代表的具体含义,以及两者之间的关联。

打开 assets 目录下的 Script 目录,就可以看到这个 HelloWorld.js 文件。用文本编辑器(推荐使用 Sublime Text)打开它,可以看到下图所示的源码。

我们稍微分析下这段源码。cc.Class 是一个由 cc.Component 派生出来的组件类。它通过 properties 关键字,定义了一系列属性:label 是一个默认值为 null 的 cc.Label 对象,text 是一个字符串。接着是两个函数,第一个是 onLoad() 函数,即组件挂接的对象在初始化完成后的回调函数,其中的代码表示将当前脚本的 label 对象显示的文本字符串设置成字符串 text 的值。第二个是 update 函数,即每一帧更新时的回调函数。

现在,我们已了解了组件类的脚本内容,而且它与 Canvas 挂接在一起。

下面,我们再来看看组件类的 label 是如何传入,并通过 Canvas,在场景中显示的。

回到层级管理器,我们看到在 Canvas 下面还有四个对象,分别是 MainCamera、background、cocos、label。在 Cocos Creator 1.X 版本中, 并没有 MainCamera 组件,是 2.0 版本中,新增加的功能。

单击层级管理器中的“MainCamera”,在右边的属性检查器中看到它有 Node 基本属性和 Camera 独有属性。Camera 主要包括以下几个属性。

  • ZoomRatio:视图缩放,改变这个值可以缩放摄像机看到的景象,相当于摄像机的拉进拉远操作。
  • BackgroundColor:颜色缓冲区清空时显示的底色,将 background 删除后,将显示 BackgroundColor 所设置的颜色。
  • Depth:摄像机的深度缓冲值。
  • cullingMask:删除 Mask 值设置,如果您希望某些 Node 属性不显示,可以使用它。
  • clearFlags:是否清空颜色缓冲、深度缓冲、模版缓冲区。

单击 background,在属性检查器中可以看到它包含基类 Node、Widget 和 Sprite 三大属性。将 Node 区域中的 Color 设置成白色,场景编辑器中的背景对象会马上变成白色。

Widget 主要用于排版布局,在这里可以设置如何对齐,如下图所示:

Sprite 是我们经常要用的精灵。开发时,我们只需从资源管理器中拖动一张图片到下方的 SpriteFrame,即可对背景精灵的图片进行快速设置。本例中,我们选用了资源管理器中的 SingleColor 图片,它是一张纯白色图片,当引擎绘制精灵时,默认的颜色混合方式(最终色 = 纹理色(纯白)x 顶点色)决定了它将显示 Node 中设置的颜色。

在层级管理器里单击 Cocos,可以看到图标精灵 Sprite 属性中 SpriteFrame 项为 HelloWorld.png。下面的 Type 项用来设置渲染方式,本项目选择普通(SIMPLE),SizeMode 设置为 TRIMMED,即按照图片非透明区域大小设置精灵大小。若想手动设置它的大小,SizeMode 可改为 CUSTOM;若采用图片原始大小,可选择 RAW。后面的 Trim 项用来设置精灵是否裁切透明边缘区域。最后的 Blend 项,用来设置渲染时顶点混合方式。

我们将 background 再调整为黑色,并在层级管理器中单击“label”,这时场景管理器中对象的 Label 被选中,在属性检查器里,Label 组件的属性也列了出来,如下图所示。

在 String 项后面的输入框中输入文字,即可改变 Label 的文字内容,后面还有一些常用的文字设置,包括对齐方式、大小、排版模式、字体等。

如果将一个 TTF 字体文件放在 assets 下,您便可直接在资源管理器中将它拖放到 Font 框里,从而完成对 Lable 字体的设置。

现在我们明白了,Cocos Creator “Hello World”的工作方式是这样的:

  1. 首先,在空工程里建一个名为“Hello World”的 Scene;
  2. 接着,在该 Scene 里创建一个 Canvas,创建一个精灵 background 作为它的背景,将纯白色图 singleColor.png 设置为它的前景图片,通过 Node 属性中的颜色与它混合后的结果作为背景颜色;
  3. 之后,再创建一个精灵 cocos,将 HelloWorld.png 设置为它的前景图片;
  4. 最后,创建一个文本控件 Label。

完成该设计后,创建 JavaScript 脚本组件类,其中包含 label 和 text 两个参数,在代码中将 text 的值赋给 label 的 String 属性,并在 Cocos Creator 中将 JS 组件类挂接在 Canvas 对象上,再用鼠标单击 label 对象,保持按下状态拖动到属性检查器的 JS 组件参数上,同时在 Text 属性输入框中输入“Hello,World!”,为 text 属性完成赋值。这样整个工程就完成了。

调试与运行

Cocos 的调试运行非常简单。一般情况下,我们直接单击顶点的三角形,运行图标按钮即可弹出浏览器运行。如果想以独立窗口方式运行,可以将“浏览器”切换成“模拟器”再单击运行图标,这时在 PC 上会有独立的 EXE 窗口运行工程。

除此之外,如果您想在手机上尽快看到效果,可以用手机扫描二维码,即可看到工程在移动端的运行效果。是不是很酷?当然,要确保手机和 PC 在同一个局域网里。

总结

如果您使用过 Unity,可能对这一切都比较熟悉。Cocos Creator 的整个布局和操作习惯与 Unity 有很多相似之处,这一点非常棒。对于游戏团队来说,可以在 Unity 和 Cocos Creator 中快速切换,大大降低了学习成本。当然,如果您还只是一个新手,也没关系,学完本课程内容后,您将会很快熟练掌握这一切!

点击了解《Cocos Creator 极速入门》

第02课:基础图像绘制
第03课:精灵
第04课:精灵动画
第05课:序列帧动画
第06课:骨骼动画
第07课:界面控件的使用(上)
第08课:界面控件的使用(中)
第09课:界面控件的使用(下)
第10课:音乐与音效播放
第11课:粒子特效的使用
第12课:预制体的创建与使用
第13课:瓦块地图的使用
第14课:内嵌浏览器和视频播放器
第15课:下载与网络通信
第16课:动态加载资源
第17课:脚本与逻辑
第18课:碰撞检测
第19课:解析官方案例《接星星》
第20课:自研游戏《21 点》
第21课:项目的打包与发布

阅读全文: http://gitbook.cn/gitchat/column/5bbdab889ccd7c1379f30baa

相关资源:cocosCreator切水果
相关推荐
<p> <strong><span style="background-color:#E53333;font-size:18px;">课程目标:</span></strong> </p> <p> <span style="color:#337FE5;font-size:16px;">掌握Cocos Creator游戏开发的基本过程,能独立完成游戏项目的设计与开发。适用人群希望学习和了解手机游戏、H5游戏、网络游戏的初学者。想要开发自己的一款小游戏,并且部署到服务器上。</span> </p> <p> <br /> </p> <p> <span style="background-color:#FFFFFF;color:#E53333;font-size:14px;">注意:本项目是客户端开发,后续会推出服务端开发的课程。如果大家对课里面的内容有疑问,可以在评论区留言。</span> </p> <p> <span style="font-size:18px;background-color:#E53333;"><strong>为什么选择cocos creater:</strong></span> </p> <p> <span style="color:#337FE5;"> Cocos Creator 目前支持发布游戏到 Web、iOS、Android、各类"小游戏"、PC 客户端等平台,真正实现一次开发,全平台运行。其编辑器</span><span style="font-size:inherit;color:#333333;"><span style="font-size:16px;color:#337FE5;"> 完全为引擎定制打造,包含从设计、开发、预览、调试到发布的整个工作流所需的全功能一体化编辑器。</span><span style="font-size:16px;color:#337FE5;"><strong>很方便。门槛低,学习成本低。</strong></span></span> </p> <p> <br /> </p> <p> <span><span style="font-size:18px;background-color:#E53333;">为什么强烈建议推荐本套课程:</span></span> </p> <p> <span><span style="font-size:14px;">  1.从0开始一点点敲的代码,由浅入深,深入剖析</span></span> </p> <p> <span><span style="font-size:14px;">  2.生产环境Linux部署,减少弯路,一步到位</span></span> </p> <p> <span><span style="font-size:14px;">  3. 老师每天上线答疑,让同学少走弯路</span></span> </p> <p> <span><span style="font-size:14px;">  4. 实战商业化项目,学习价值很高</span></span> </p> <p> <span style="font-size:14px;"><strong></strong></span> </p> <p> <br /> </p> <p> <span style="font-size:18px;background-color:#E53333;"><strong>项目开发的功能:</strong></span> </p> <p> <span style="color:#337FE5;font-size:16px;">本项目具有一定商业化价值。学习本项目我们将开发如下功能:</span> </p> <p> <span style="color:#337FE5;font-size:16px;">1.客户端-注册功能,token</span><span style="color:#337FE5;font-size:16px;">登录功能</span> </p> <p> <span style="color:#337FE5;font-size:16px;">2.客户端大厅功能,包含高分场,低分场</span> </p> <p> <span style="color:#337FE5;font-size:16px;">3.客户端好友功能,邮件列表功能,金币转换,排行榜功能</span> </p> <p> <span style="color:#337FE5;font-size:16px;">4.小三元动画,小满贯动画,跳远动画,普通开奖动画,旋转动画等</span> </p> <p> <span style="color:#337FE5;font-size:16px;">5.Nginx+阿里云部署,H5打包,域名申请</span> </p> <p> <span style="color:#337FE5;font-size:16px;">6.客户端http和websocket与后台通信,心跳协议</span> </p> <p> <br /> </p> <p> <span style="background-color:#E53333;font-size:18px;"><strong>游戏项目部分截图展示:</strong></span> </p> <p> <span style="background-color:#E53333;font-size:18px;"><strong><img src="https://img-bss.csdn.net/201909251331509635.gif" alt="" /><br /> </strong></span> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201909251304336418.gif" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201909251329143721.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201909251303439239.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:18px;background-color:#E53333;"><strong>后台展示:(本课程只介绍客户端,后续会推出服务端的课程,使用python开发)</strong></span> </p> <p> <img src="https://img-bss.csdn.net/201909251305156212.png" alt="" /> </p> <p> <br /> </p> <p> <strong>免责声明:</strong> </p> <p> <strong>素材均是网络搜集,本项目仅用于教学,请勿商用。</strong> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页