Introduction to "development record" WeChat mini-game development-Tetris

Prate

For a while, I was going to do a small game, of course, is a single machine, just to understand the process of small game development, the final choice of Tetris this classic mini-game as a demo, the source code has been hosted value GitHub, of course, this game demo is not unfriendly, But already can let me get started applet developed XD.

Demo Address: Github.com/nbclw/laya_brick

Get ready

In any development before the need for the development of something to have a certain understanding, preparation;

　　The small game principle : The small game is belongs to the H5 game one kind of bar, I was so understanding; in H5, there is a canvas, which is similar to the computer's canvas, the new color behind the old color, the old color is not recorded But the game can have the concept of FPS, for example, we can use the program to draw 50 frames per second canvas (canvas), that is, FPS is 50, then the game's various pictures can be moved; however, there are certain limitations of the game, such as the final game package (code + resources) must not exceed 4M, Of course, you can also load the game by means of a package load, which is not more than 8M;

　　account : Before the development of small programs, you need to go to the public platform to apply for a Development Account, if only to study, apply for a personal account is also completely OK; After the application is completed, there is a AppID logo in the setup-development settings, which is required for the new project. In addition, the platform also gives a lot of documents, APIs for learning access;

　　Development Tools : Tools are also given a special development tools, in the public platform can be downloaded to;

　　game engine : No matter what development, there will always be some convenient integration tools for everyone to use, more powerful people; Here I choose the layabox game engine, so, in the development of the need to download a layaide development tool, In this area to write games and release, and finally in the special development tools for the final debugging and uploading;

　　language selection : Using Layaide to develop a mini-game, it supports three languages: ActionScript, JavaScript, TypeScript; First, ActionScript, I have no contact with this language. And compared with the remaining two languages, only more can do flash games, I do not know flash games, so first pass off, JavaScript language is more familiar, but because it is a weak language, although recently a lot of compensation measures, but I do not have much time to try, So the first thing to do is to make a reservation; Finally, typescript, the language is said to be a superset of JavaScript, with a class, variable and other static language characteristics, is the best language I took over, and then chose to use typescript to develop the small game; The demo contains a typescript of a simple learning document, you can read the general first, I believe it will be a little help;

　　Environment Construction :

1, to the public platform to apply for public platform account, download and install Web Developer tools;

2, go to layabox download layaide development tools, according to the tutorial configuration typescript compilation environment, technical documents in the official website typescript topics have tutorials, here but more tired;

Start development

In fact, when using the Web Developer tool Development, there will be a template game can also be based on its architecture and API to develop small games, but because I do not have the ability to develop a version of the game (using JavaScript), debugging can run, but to the phone can not, I do not too tangled, directly into the layaide development, after all, the official website has more cases and APIs, the development of the latter unless the special situation, said is layaide development;

1, the new project, here we choose 2d Project and Typescript project, due to the size of the small program game package, when I master the ability to control the size of resources, I chose a relatively simple 2d project

2, the project structure: 1 is the entry file for the project, the equivalent of the main file, as for why the import file, the following will be mentioned; 2 is a reference to the code resources, which encapsulates the 2d project necessary encapsulation class, 3 for the project scene resource files, including audio, video, pictures and other games required resources;

3, Bin folder: This folder is compiled after the running folder, more important, the following to do a detailed introduction;

In fact, although we are using typescript to develop a mini-game, but eventually compiled into JavaScript files, by executing JavaScript files to run the game, but using typescript will be more rigorous than the development of JavaScript, If your JavaScript is strong, you can also try to write it using JavaScript;

The inside of the JS file for the above project structure of the Libs compiled results, the inside of each package of modules compiled into the various files

Inside the JS file for the above project structure of the SRC compilation results, the respective TS file compiled into the corresponding JS;

The file as the execution of the small game file, here can not be too much to ignore;

This is for the post-release applet to refer to how many JS files (compiled libs and JS files), if the program is not used in the module, can be deleted in this area to reduce the number of code

4, Project preparation: The general structure of the project and the compilation of understanding of the almost, then began to write our own small program-Tetris, the development process is slightly, anyway, is the use of the API, this on the official website has a lot of cases and code;

First delete the previous code, resource files, and then build your own project, before publishing, I will not use the index.html file in the JS reference comments out

　　　　

5, publish, choose the publishing platform, first to a simple release, not including version control and so on; After the release, we will get some files, in fact Libs This folder is not much use, although there is a compiled package file, But all the code that actually runs the project is layaide automatically compressed into the Code.js file, so the Libs folder can be deleted, in order to reduce the size of the game pack; there is a very good news, that is, the above I said the resource folder assets is not published, I did not know how, can only manually Copy it and locate the reference path in the Code.js file and correct it;

　　　　

6, the web Developer tool Final debugging, open the Developer tool, open the project, enter our AppID, open Layaide released the project, if the simulator can be normal operation, so long click Preview It, you can see on the phone, phone preview no problem, You can click upload upload to the public platform up;

7, so far the development is only oneself can see, if want to let others play to their game, then also need the last step, in the public platform-development management, will own just upload the project released, of course, the real release of the game is to submit the audit, there are a lot of things (various materials) to prepare, I chose the experience version, can only specify their own designated people to play, but also enough, anyway, others have played, wait until there is a real fun game to make, in earnest really publish it;

Again, DAO.

Next Goal:

1, learn to use the sub-pack loading game, bigger game pack bring better game (although up to 8M);

2, learn to use the network, the next step is to do a simple online game;

3, learn to optimize the code, remove unnecessary resources, reduce the size of the game pack;

Hard to do with the use of Layabox Tetris can be run, although the game features a few, although released to the public platform is only a experience version, only a few people play (saying that no one is playing this game), but in addition to the final step of the review, the other process has gone through, Finally can be from 0 to 1 to make a small game, very happy, here to share these days learned, hope that someone can use to get, here is the end.