preface

In fact, VUE and COcos have a lot in common, here is how to embed COcos in VUE-CLI. Suitable for people with web foundation.

version

Vue2 +cocos2.3.4, theoretically vue3 also works.

Note: Due to subcontracting of 2.4.x and above, not applicable to COCOS engines above 2.4.x. But the principle is understood after the visual can also be changed to support.

Overall effect

  1. The ability to display the contents of coCOS in vue-CLI scaffolding.
  2. How CoCOS interacts with the Web.
  3. How the Web interacts with CoCOS.
  4. In fact, it can achieve some effects similar to the editor, but the web side saving requires another technical solution, such as electron or server side storage, etc.

The basic idea

The first and most difficult step, how do you embed cocos into your Web page? There are really two options

  1. Embedded iframe.
  2. Cocos integration within the Web.

The first method has many disadvantages, mainly reflected in the lack of full control of cocos, and the experience of iframe is not very good. So let’s focus on the second option.

The directory structure

In fact, the whole project is a standard VUE2 project.

The principle of

The principle is very simple. We can think of Cocos as a Canvas-based plugin, which turns the question into: How do you introduce a third-party library without NPM package management?

Before solving the above problem, take a look at the directory where Cocos packaged the project files:

Among the more important documents:

  1. Index.html: entry file.
  2. Cocos2d-js-min. js: engine file.
  3. Main.js: Sets almost all file paths. (important)
  4. Project.js: the game logic file.
  5. Setting. js: configuration file.

Since we are embedding cocos in vue-cli, we discard the original index.html and put all the files we need to import into the vue-cli entry file:

Let’s take a look at what files are introducedPutting entry files is simple:

The project. Js file was originally introduced in main.js, but I added this file directly to the entry file for convenience. If your project is dev mode or md5, the file name may be different. I didn’t use physcis.js so I didn’t write it.

There is one file I didn’t include, main.js, which sets the path of various files and starts the project. If you are interested, take a look at the contents of main.js. The file contains a lot of content and I won’t take screenshots.

Since it is used in the Web, it should be able to start the project at any time, so I changed main.js, corresponding to my directory is creator-load.js.

Now that you’re ready to fully use cocos, the next step is to make a Canvas container to hold the cocos.

Call creator-load.js to initialize it when appropriate, but main.js can also be broken down, by separating the code that starts the project from the code that configits the path, which looks cleaner.

How do cocos communicate with VUE?

communication

In fact, this is not too simple, the simplest is to use global variables to store variables, with the event system to notify both sides of the event trigger, my project wrote a simple event file can be simply used.

But for the sake of maintenance, it’s important to encapsulate these. Specific how to package to see their own habits.

address

github

Engineering opening mode

Run in the vueTem folder

    cnpm i
    npm run dev
Copy the code

If you change the package path in cocosTem, you need to specify vueTem/static/cocos-build.

Write in the last

Arguably, if Cocos and Vue can communicate, then there is a good way to edit games on the web, such as courseware editing tools in the education industry. I’ve written about this in Electron, but it’s demo level, and the downside of the Web side is that it’s hard to substitute IO for files.

Another problem is that the current file is packaged, if used for editing, there will be a lot of useless resources, how to remove these resources, is also a key (or maybe do not eliminate?)

The project of demo was modified by me in a project, and sensitive information was removed. However, it may seem that some codes are useless and there are a lot of codes, and many parts of demo may not conform to the project specifications, sorry for that. But it should not affect the look.