• 标记生成出错,请与管理员联系! 2019-05-17
  • 这个问题,不是我们那些学者所讲的,国家崛起美国害怕了。而是美国舞着大棒,配合国内的资本共同讹诈。 2019-05-17
  • 香河县纪委监委严把信访举报交办督办回复“三关” 让信访举报件件有着落 2019-05-16
  • 向雷锋同志学习 厉害了!体彩志愿服务团队 2019-05-14
  • 美国20岁说唱歌手在迈阿密中枪疑似身亡 2019-05-14
  • 第37届香港电影金像奖颁奖典礼举行 2019-05-04
  • 这是一个错误的观点!这个错误的观点在自以为懂得马克思主义的人群中非常普遍!所以,这也就是中国为什么真正懂马克思主义的人不多的主要原因! 2019-05-02
  • 经济专家那么多,谁写出如何搞好公有制呢? 2019-05-02
  • 海军首次举行水雷战竞赛性考核 2019-05-02
  • 公共图书馆如何更有效地服务读者 2019-05-02
  • 男子模仿网红骑马上路 机动车道飞奔当街摔晕 2019-04-30
  • 小长假前两天,广州哪些文化场馆最火爆? 2019-04-30
  • 高清图集:习近平在山东考察 2019-04-28
  • 2000多家国企医院年底前完成剥离 2019-04-25
  • 天津旅游嘉年华下周开幕 多项活动展现文旅融合--旅游频道 2019-04-15
  • 用户
     找回密码
     立即注册

    QQ登录

    只需一步,快速开始

    扫一扫,登录网站

    2018-1-5 17:59:00 Rolan 管理员 楼主 451219
    快速上手安装开发工具
    前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装。

    你的第一个小游戏
    新建项目选择河北体彩11选5今天开奖项目,选择代码存放的硬盘路径。 目前小游戏不提供公开注册,可点击体验小游戏使用无 AppID 模式。 给你的项目起一个好听的名字,最后,勾选“建立游戏快速启动模板”(注意:你要选择一个空的目录才会有这个选项),点击确定,你就得到了你的第一个小游戏了。

    点击顶部菜单编译就可以在 IDE 预览你的第一个小游戏。


    真机预览
    点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小游戏的表现。点击预览按钮,通过微信的扫一扫在手机上体验你的第一个小游戏。


    文件结构
    小游戏只有以下两个必要文件:
    • game.js 小游戏入口文件
    • game.json 配置文件

    配置
    小游戏开发者通过在根目录编写一个 game.json 文件进行配置,开发者工具和客户端需要读取这个配置,完成相关界面渲染和属性设置。


    deviceOrientation


    示例配置
    [JavaScript] 纯文本查看 复制代码
    {
        "deviceOrientation": "portrait",
        "networkTimeout": {
            "request": 5000,
            "connectSocket": 5000,
            "uploadFile": 5000,
            "downloadFile": 5000
        }
    }
    wx API

    你只能使用 JavaScript 来编写小游戏。小游戏的运行环境是一个 绑定了一些方法的 JavaScript VM。不同于浏览器,这个运行环境没有 BOM 和 DOM API,只有 wx API。接下来我们将介绍如何用 wx API 来完成创建画布、绘制图形、显示图片以及响应用户交互等基础功能。

    创建 Canvas
    调用 wx.createCanvas() 接口,可以创建一个 Canvas 对象。
    [JavaScript] 纯文本查看 复制代码
    var canvas = wx.createCanvas()
    此时创建的 canvas 已经显示在了屏幕上,且与屏幕等宽等高。
    [JavaScript] 纯文本查看 复制代码
    console.log(canvas.width, canvas.height)
    但是由于没有在 canvas 上进行绘制,所以 canvas 是透明的。使用 2d 渲染上下文的进行简单的绘制,可以在屏幕左上角看到一个 100x100 的红色矩形。
    [JavaScript] 纯文本查看 复制代码
    var context = canvas.getContext('2d')
    context.fillStyle = 'red'
    context.fillRect(0, 0, 100, 100)
    通过 Canvas.getContext() 方法可以获取 2d 或 WebGL 渲染上下文 RenderingContext,调用渲染上下文的绘制方法可以在 Canvas 上进行绘制。小游戏基本上支持 2d 和 WebGL 1.0 所有的属性和方法,详情请见 RenderingContext。由于使用 WebGL 的绘制过程较为复杂,所以本文中的示例代码都以 2d 渲染上下文的绘制方法编写。
    通过设置 width 和 height 属性可以改变 Canvas 对象的宽高,但这也会导致 Canvas 内容的清空和渲染上下文的重置。
    [JavaScript] 纯文本查看 复制代码
    canvas.width = 300
    canvas.height = 300

    显示图片
    通过 wx.createImage() 接口,可以创建一个 Image 对象。Image 对象可以加载图片。当 Image 对象被绘制到 Canvas 上时,图片才会显示在屏幕上。
    [JavaScript] 纯文本查看 复制代码
    var image = wx.createImage()
    设置 Image 对象的 src 属性可以加载一张本地图片或网络图片,当图片加载完毕时会执行注册的 onload 回调函数,此时可以将 Image 对象绘制到 Canvas 上。
    [JavaScript] 纯文本查看 复制代码
    image.onload = function () {
        console.log(image.width, image.height)
        context.drawImage(image, 0, 0)
    }
    image.src = 'logo.png'

    创建多个 Canvas
    在整个小游戏运行期间,首次调用 wx.createCanvas 接口创建的是一个上屏 Canvas。在这个 canvas 上绘制的内容都将显示在屏幕上。而第二次、第三次等后几次调用 wx.createCanvas 创建的都会是离屏 Canvas。在离屏 Canvas 上绘制的内容仅仅只是绘制到了这个离屏 Canvas 上,并不会显示在屏幕上。
    以如下代码为例,运行后会发现屏幕上并没有在 (0, 0) 的位置显示 100x100 的红色矩形。因为我们是在一个离屏的 Canvas 绘制的。
    [JavaScript] 纯文本查看 复制代码
    var screenCanvas = wx.createCanvas()
    var offScreenCanvas = wx.createCanvas()
    var offContext = offScreenCanvas.getContext('2d')
    offContext.fillStyle = 'red'
    offContext.fillRect(0, 0, 100, 100)
    为了让这个红色矩形显示在屏幕上,我们需要把离屏的 offScreenCanvas 绘制到上屏的 screenCanvas 上。
    [JavaScript] 纯文本查看 复制代码
    var screenContext = screenCanvas.getContext('2d')
    screenContext.drawImage(offScreenCanvas, 0, 0)

    动画
    在 JavaScript 中,一般通过 setInterval/setTimeout/requestAnimationFrame 来实现动画效果。小游戏对这些 API 提供了支持:
    另外,还可以通过 wx.setPreferredFramesPerSecond() 修改执行 requestAnimationFrame 回调函数的频率,以降低性能消耗。

    触摸事件
    响应用户与屏幕的交互是游戏中必不可少的部分,小游戏参照 DOM 中的 TouchEvent 提供了以下监听触摸事件的 API:
    [JavaScript] 纯文本查看 复制代码
    wx.onTouchStart(function (e) {
        console.log(e.touches)
    })
    
    wx.onTouchMove(function (e) {
        console.log(e.touches)
    })
    
    wx.onTouchEnd(function (e) {
        console.log(e.touches)
    })
    
    wx.onTouchCancel(function (e) {
        console.log(e.touches)
    


    微信小游戏资讯+教程



    微信小游戏Demo

    分享至 : QQ空间
    17 人收藏
    有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
    还可以加QQ交流群咨询:536592077。
    2018-1-29 11:49:15 shepherd 新手上路
    沙发
    赞一个
    学习下

    赞一个
    66666
    2018-10-7 21:07:42 w祥38 新手上路
    6#
    赞一个
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
  • 标记生成出错,请与管理员联系! 2019-05-17
  • 这个问题,不是我们那些学者所讲的,国家崛起美国害怕了。而是美国舞着大棒,配合国内的资本共同讹诈。 2019-05-17
  • 香河县纪委监委严把信访举报交办督办回复“三关” 让信访举报件件有着落 2019-05-16
  • 向雷锋同志学习 厉害了!体彩志愿服务团队 2019-05-14
  • 美国20岁说唱歌手在迈阿密中枪疑似身亡 2019-05-14
  • 第37届香港电影金像奖颁奖典礼举行 2019-05-04
  • 这是一个错误的观点!这个错误的观点在自以为懂得马克思主义的人群中非常普遍!所以,这也就是中国为什么真正懂马克思主义的人不多的主要原因! 2019-05-02
  • 经济专家那么多,谁写出如何搞好公有制呢? 2019-05-02
  • 海军首次举行水雷战竞赛性考核 2019-05-02
  • 公共图书馆如何更有效地服务读者 2019-05-02
  • 男子模仿网红骑马上路 机动车道飞奔当街摔晕 2019-04-30
  • 小长假前两天,广州哪些文化场馆最火爆? 2019-04-30
  • 高清图集:习近平在山东考察 2019-04-28
  • 2000多家国企医院年底前完成剥离 2019-04-25
  • 天津旅游嘉年华下周开幕 多项活动展现文旅融合--旅游频道 2019-04-15
  • 百家乐包杀 重庆幸运农场计划 pk10最牛稳赚计划群 3d彩票走势图网 重庆时时彩系统乱了吗 p3开机号试机号彩宝网 2元彩票中500万的 北京pk10绝密方法 广东彩票十一选五 江西新时时彩技巧qq群 加拿大三分彩开奖结果 七乐彩中奖 2015排列三走势图带连 老时时彩杀号定胆 黑龙江时时彩分析 山东福彩网