


An introduction to WeChat mini games based on WeChat development tools
Jul 26, 2018 pm 03:04 PMThe article explains it in detail, allowing you to get started quickly. First install the development tools,Go to the Developer Tools Download Page, and download the corresponding installation package according to your operating system for installation. Next, you can develop WeChat mini games.
Your first mini game
Create a new project, select the mini program project, and select the hard disk path where the code is stored . Currently, the mini-game does not provide public registration. You can click to experience the mini-game using the AppID-less mode. Give your project a nice name, and finally, check "Create a game quick start template" (note: you have to select an empty directory to have this option), click OK, and you will get your first It's a little game.
Click Compile on the top menu to preview your first mini-game in the IDE.
Real device preview
Click tool You can see the performance of this mini-game in the simulator interface on the left side of the tool by pressing the compile button. Click the preview button to experience your first mini-game on your phone through WeChat scanning.
##File structure
Mini games only The following two necessary files:
game.js mini-game entry file
game .json configuration file
Configuration
Small game developers write in the root directory A game.json file is configured. Developer tools and clients need to read this configuration to complete related interface rendering and property settings.
##deviceOrientation
Example configuration
##1 2 3 4 5 ##6 7 ##8 9 ## { "deviceOrientation": "portrait", "networkTimeout": { "request": 5000, "connectSocket": 5000, "uploadFile": 5 000, "downloadFile": 5000 } } |
You can only use JavaScript to write mini-games. The running environment of the mini game is a JavaScript VM bound with some methods. Unlike the browser, this running environment does not have BOM and DOM API, only wx API. Next, we will introduce how to use wx API to complete basic functions such as creating canvas, drawing graphics, displaying pictures, and responding to user interaction.
Create Canvas
Call the wx.createCanvas() interface to create a Canvas object.
##1
varcanvas = wx.createCanvas() 此時創(chuàng)建的 canvas 已經顯示在了屏幕上,且與屏幕等寬等高。
但是由于沒有在 canvas 上進行繪制,所以 canvas 是透明的。使用 2d 渲染上下文的進行簡單的繪制,可以在屏幕左上角看到一個 100x100 的紅色矩形。
通過 Canvas.getContext() 方法可以獲取 2d 或 WebGL 渲染上下文 RenderingContext,調用渲染上下文的繪制方法可以在 Canvas 上進行繪制。小游戲基本上支持 2d 和 WebGL 1.0 所有的屬性和方法,詳情請見 RenderingContext。由于使用 WebGL 的繪制過程較為復雜,所以本文中的示例代碼都以 2d 渲染上下文的繪制方法編寫。 通過設置 width 和 height 屬性可以改變 Canvas 對象的寬高,但這也會導致 Canvas 內容的清空和渲染上下文的重置。
顯示圖片 通過 wx.createImage() 接口,可以創(chuàng)建一個 Image 對象。Image 對象可以加載圖片。當 Image 對象被繪制到 Canvas 上時,圖片才會顯示在屏幕上。
設置 Image 對象的 src 屬性可以加載一張本地圖片或網絡圖片,當圖片加載完畢時會執(zhí)行注冊的 onload 回調函數,此時可以將 Image 對象繪制到 Canvas 上。
創(chuàng)建多個 Canvas 在整個小游戲運行期間,首次調用 wx.createCanvas 接口創(chuàng)建的是一個上屏 Canvas。在這個 canvas 上繪制的內容都將顯示在屏幕上。而第二次、第三次等后幾次調用 wx.createCanvas 創(chuàng)建的都會是離屏 Canvas。在離屏 Canvas 上繪制的內容僅僅只是繪制到了這個離屏 Canvas 上,并不會顯示在屏幕上。 以如下代碼為例,運行后會發(fā)現屏幕上并沒有在 (0, 0) 的位置顯示 100x100 的紅色矩形。因為我們是在一個離屏的 Canvas 繪制的。
為了讓這個紅色矩形顯示在屏幕上,我們需要把離屏的 offScreenCanvas 繪制到上屏的 screenCanvas 上。
動畫 在 JavaScript 中,一般通過 setInterval/setTimeout/requestAnimationFrame 來實現動畫效果。小游戲對這些 API 提供了支持:
另外,還可以通過 wx.setPreferredFramesPerSecond() 修改執(zhí)行 requestAnimationFrame 回調函數的頻率,以降低性能消耗。 觸摸事件 響應用戶與屏幕的交互是游戲中必不可少的部分,小游戲參照 DOM 中的 TouchEvent 提供了以下監(jiān)聽觸摸事件的 API:
相關文章: 微信公眾平臺開發(fā)實現2048游戲的方法,公眾2048 相關視頻: The above is the detailed content of An introduction to WeChat mini games based on WeChat development tools. For more information, please follow other related articles on the PHP Chinese website! Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![]() Hot AI Tools![]() Undress AI ToolUndress images for free ![]() Undresser.AI UndressAI-powered app for creating realistic nude photos ![]() AI Clothes RemoverOnline AI tool for removing clothes from photos. ![]() Clothoff.ioAI clothes remover ![]() Video Face SwapSwap faces in any video effortlessly with our completely free AI face swap tool! ![]() Hot Article
Guide: Stellar Blade Save File Location/Save File Lost/Not Saving
4 weeks ago
By DDD
Oguri Cap Build Guide | A Pretty Derby Musume
2 weeks ago
By Jack chen
Agnes Tachyon Build Guide | A Pretty Derby Musume
1 weeks ago
By Jack chen
Dune: Awakening - Advanced Planetologist Quest Walkthrough
3 weeks ago
By Jack chen
Date Everything: Dirk And Harper Relationship Guide
4 weeks ago
By Jack chen
![]() Hot Tools![]() Notepad++7.3.1Easy-to-use and free code editor ![]() SublimeText3 Chinese versionChinese version, very easy to use ![]() Zend Studio 13.0.1Powerful PHP integrated development environment ![]() Dreamweaver CS6Visual web development tools ![]() SublimeText3 Mac versionGod-level code editing software (SublimeText3) ![]() Hot Topics![]() Dewu APP is currently a very popular brand shopping software, but most users do not know how to use the functions in Dewu APP. The most detailed usage tutorial guide is compiled below. Next is the Dewuduo that the editor brings to users. A summary of function usage tutorials. Interested users can come and take a look! Tutorial on how to use Dewu [2024-03-20] How to use Dewu installment purchase [2024-03-20] How to obtain Dewu coupons [2024-03-20] How to find Dewu manual customer service [2024-03-20] How to check the pickup code of Dewu [2024-03-20] Where to find Dewu purchase [2024-03-20] How to open Dewu VIP [2024-03-20] How to apply for return or exchange of Dewu ![]() How to upgrade numpy version: Easy-to-follow tutorial, requires concrete code examples Introduction: NumPy is an important Python library used for scientific computing. It provides a powerful multidimensional array object and a series of related functions that can be used to perform efficient numerical operations. As new versions are released, newer features and bug fixes are constantly available to us. This article will describe how to upgrade your installed NumPy library to get the latest features and resolve known issues. Step 1: Check the current NumPy version at the beginning ![]() After rain in summer, you can often see a beautiful and magical special weather scene - rainbow. This is also a rare scene that can be encountered in photography, and it is very photogenic. There are several conditions for a rainbow to appear: first, there are enough water droplets in the air, and second, the sun shines at a low angle. Therefore, it is easiest to see a rainbow in the afternoon after the rain has cleared up. However, the formation of a rainbow is greatly affected by weather, light and other conditions, so it generally only lasts for a short period of time, and the best viewing and shooting time is even shorter. So when you encounter a rainbow, how can you properly record it and photograph it with quality? 1. Look for rainbows. In addition to the conditions mentioned above, rainbows usually appear in the direction of sunlight, that is, if the sun shines from west to east, rainbows are more likely to appear in the east. ![]() Testing a monitor when buying it is an essential part to avoid buying a damaged one. Today I will teach you how to use software to test the monitor. Method step 1. First, search and download the DisplayX software on this website, install it and open it, and you will see many detection methods provided to users. 2. The user clicks on the regular complete test. The first step is to test the brightness of the display. The user adjusts the display so that the boxes can be seen clearly. 3. Then click the mouse to enter the next link. If the monitor can distinguish each black and white area, it means the monitor is still good. 4. Click the left mouse button again, and you will see the grayscale test of the monitor. The smoother the color transition, the better the monitor. 5. In addition, in the displayx software we ![]() PhotoshopCS is the abbreviation of Photoshop Creative Suite. It is a software produced by Adobe and is widely used in graphic design and image processing. As a novice learning PS, let me explain to you today what software photoshopcs5 is and how to use photoshopcs5. 1. What software is photoshop cs5? Adobe Photoshop CS5 Extended is ideal for professionals in film, video and multimedia fields, graphic and web designers who use 3D and animation, and professionals in engineering and scientific fields. Render a 3D image and merge it into a 2D composite image. Edit videos easily ![]() When using a computer to input English, sometimes we encounter the difference between full-width English letters and half-width English letters. Full-width English letters refer to the characters input by pressing the Shift key and the English letter key combination when the input method is Chinese mode. They occupy a full-width character width. Half-width English letters refer to characters input directly when the input method is English mode, and they occupy half a character width. In some cases, we may need to convert full-width English letters to half-width letters. Here is a simple tutorial: First, open a text editor or any ![]() 1. First open WeChat. 2. Click [+] in the upper right corner. 3. Click the QR code to collect payment. 4. Click the three small dots in the upper right corner. 5. Click to close the voice reminder for payment arrival. ![]() PHP Tutorial: How to Convert Int Type to String In PHP, converting integer data to string is a common operation. This tutorial will introduce how to use PHP's built-in functions to convert the int type to a string, while providing specific code examples. Use cast: In PHP, you can use cast to convert integer data into a string. This method is very simple. You only need to add (string) before the integer data to convert it into a string. Below is a simple sample code ![]() |