Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。

时间:2024-05-22 11:55:52

LZ-Says:未来,不仅仅有诗和远方。。。

Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。

前言

身体好,才是真的好~ 从此之后,要会生活,努力活出自己想要的样子~!!!

Enmmm,LZ 也是小白一枚,初入贵行,还望手下留情~

本篇主要作用,或者说定位在于和 LZ 一样得小白,希望多多交流,欢迎大佬指正~

一、前期了解

首先附上 Cocos 官方地址:

中文版:http://www.cocos.com/

英文版:http://www.cocos2d-x.org/

下面开始简单了解 Cocos 简介 ~

1.1 Cocos 简介

Cocos 引擎是由触控科技推出的游戏开发一站式解决方案,包含了从新建立项、游戏制作、到 打包上线的全套流程。开发者可以通过 Cocos 快速生成代码、编辑资源和动画,最终输出适合于多个平台的游戏产品。

1.2 Cocos 整合

Cocos 整合了 Cocos 2d-x、Cocos Studio、Cocos Code IDE 等框架及工具:

  • Cocos 2d-x 引擎框架: Cocos 2d-x 是基于 OpenGL ES 的跨平台开源引擎,现为全球占有率第一的手机游戏引擎,被媒体成为“千万级手游摇篮”。游戏开发快速、简易、功能强大。Cocos2d-x核心优势在于允许开发人员利用C++、Lua及Javascript来进行跨平台部署,覆盖平台包括iOS,Android,OS X,Windows,Linux 和 Web;

  • Cocos Studio 编辑器: Cocos2d-x 引擎配套的跨平台游戏开发工具,帮助开发者快速构建游戏场景、编辑 UI、编辑动画等游戏资源,支持第三方的资源导入;

  • Cocos Code IDE: Cocos Code IDE 是一个基于 Eclipse 的跨平台 IDE,专门为 Cocos2d-x Lua & JavaScript 开发人员准备,通过 IDE 你可以方便的创建游戏工程、编写并且支持在不同平台上调试代码、实时查看代码被改变后的效果,最终直接发布成一个可上架的安装包;

  • Cocos Store 插件商店: Cocos 开放了强大的扩展功能并推出了 Cocos Store,提供了插件、资源、工具、素材等丰富的资源,为用户的开发提供了更大的灵活性。Cocos Store 将为用户提供了一个*的平台,连接全球的开发者,用户可以获得和分享自己的成果。开发者将不会为某个技术难关而烦恼,也不会为某个功能而彻夜加班,Cocos Store 会持续的收集和提供各种解决方案,建立一个共赢的平台。

1.3 Cocos Creator 出场

以下引自官方:

Cocos Creator 是以内容创作为核心的游戏开发工具,在 Cocos 2d-x 基础上实现了彻底脚本化、组件化和数据驱动等特点。 Cocos Creator 基于开源框架 Cocos 2d-x,实现了一体化、可扩展、可自定义工作流的编辑器,并在 Cocos 系列产品中第一次引入了组件化编程思想和数据驱动的架构设计,这极大地简化了 Cocos 2d-x 开发工作流中的场景编辑、UI 设计、资源管理、游戏调试和预览、多平台发布等工作,是使用 Cocos 2d-x 进行团队协作开发的最佳选择。

而本文,则依据目前最新得 Cocos Creator 进行初次开发~

1.4 看一波架构图,准备开搞~

首先,我们一起来简单看一下关于 Cocos 2d-x Framework 层架构(以备不时之需):

Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。

接下来,我们一起来简单看一下关于Cocos Creator 层架构(以备不时之需):

Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。

二、Cocos Creator 1.9.1 安装与简述

PS:由于 LZ 之前已安装 VS ,So,本次不再安装。Enmmm,别忘记 Cocos 开发者帐号。

2.1 安装图例

Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。

2.2 Dashboard 界面了解

启动 Cocos Creator 并使用 Cocos 开发者帐号登录以后,就会打开 Dashboard 界面,在这里你可以新建项目、打开已有项目或获得帮助信息。

界面预览:

Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。

上图所示的就是 Cocos Creator 的 Dashboard 界面,包括以下几种选项卡:

  • 最近打开项目: 列出最近打开项目,第一次运行 Cocos Creator 时,这个列表是空的,会提示新建项目的按钮;

  • 新建项目: 选择这个选项卡,会进入到 Cocos Creator 新项目创建的指引界面;

  • 打开其他项目: 如果你的项目没有在最近打开的列表里,你也可以点击这个按钮来浏览和选择你要打开的项目;

  • 帮助: 帮助信息,一个包括各种新手指引信息和文档的静态页面。

新建项目:

你可以在新建项目选项卡里创建新的 Cocos Creator 项目。

在新建项目页面,我们首先需要选择一个项目模板,项目模板会包括各种不同类型的游戏基本架构,以及学习用的范例资源和脚本。

Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。

一切都设置好后,点击新建项目按钮来完成项目的创建。Dashboard 界面会被关闭,然后新创建的项目会在 Cocos Creator 编辑器主窗口中打开。

关于修改项目存放地址:

  • 在页面下方可以看到项目名称和将会保存到的地址。我们可以在项目路径输入框手动输入项目所在路径和项目名称,路径的最后一节就是项目名称;

  • 也可以点击浏览按钮,打开浏览路径对话框,在你的本地文件系统中选择一个位置来存放新建项目。

帮助:

可以通过帮助页面访问 Cocos Creator 用户手册和其他帮助文档。

Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。

三、Hello World

新建示例工程,如下:

Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。

Cocos Creator 的工作流程是以数据驱动和场景为核心的,首次打开一个项目时,默认不会打开任何场景。

Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。

在资源管理器中双击箭头所指的 helloworld 场景文件。Cocos Creator 中所有场景文件都以 Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。 作为图标。

Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。

打开界面如下所示:

Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。

要预览游戏场景,点击编辑器窗口正上方的 预览游戏 按钮。

Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。

Cocos Creator 会使用默认浏览器运行当前游戏场景,效果如图所示:

Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。

当然,你也可以在左上角切换不同的设备查看预览效果。

最后,我们修改下欢迎文字~

由于 Cocos Creator 以数据驱动为核心的最初体现,就在于当我们需要改变 Hello World 的问候文字时,不需要再编辑脚本代码,而是直接修改场景中保存的文字属性。

首先在层级管理器中选中 Canvas 节点,我们的 HelloWorld 组件脚本就挂在这个节点上。

接下来在属性检查器面板下方找到 HelloWorld 组件属性,然后将 Text 属性里的文本改成:你好,权儿!:

Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。

Enmmm,预览一下:

Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。

Enmmm,本文到此结束,很简单,也很 Easy ~

一起朝着未来努力奔跑吧~

个人公众号

不定期发布博文,感谢大家关注~

Cocos 篇:基于 Cocos Creator v1.9,开始 Hello World 。。。

参考资料

  1. Cocos 引擎百科介绍:https://baike.baidu.com/item/Cocos%E5%BC%95%E6%93%8E/17680178?fr=aladdin
  2. Cocos 2d-x GitHub 地址:https://github.com/cocos2d/cocos2d-x
  3. Cocos Creator v1.9 用户手册:http://docs.cocos.com/creator/manual/zh/
  4. Cocos Creator v1.9.x User Manual:http://www.cocos2d-x.org/docs/creator/manual/en/
  5. YouTube 教程:https://www.youtube.com/watch?v=49AC6HD1Bi0
  6. 下载地址:http://www.cocos.com/download
  7. 百度云下载链接: https://pan.baidu.com/s/1-DeEjpY2e7_mlxaD4aQ3Jw 密码: 4x6u;