草庐IT

【小程序】快来开发你的第一个微信小游戏（详细流程）

伯子南 2023-04-13 原文

🥳 作者：伯子南
😎 坚信： 好记性不如乱笔头，独乐乐不如众乐乐
💪 个人主页：https://blog.csdn.net/qq_34577234?spm=1010.2135.3001.5421
👬🏻 觉得博主文章不错的话，请三连支持一下！如有需要我的支持，请私信！

本文通过开发一个简单的小游戏，来带领大家实操一下开发小游戏的基本流程👾

文章目录

1️⃣注册账号

首先需要注册一个小游戏账号，复制打开右侧链接💁‍♂️ [https://mp.weixin.qq.com/wxopen/waregister?action=step1]

✍️填写基本信息

🤳验证邮箱

  • 点击登录邮箱按钮打开邮箱
  • 查看未读邮件中标题为《微信小程序账号激活》的邮件，点击验证链接激活账号

👉信息登记

  • 小游戏开发需要合法合规，因此需要信息登记。

    -填写相关信息后点击继续 提示成功。点击前往小程序按钮

🦴设置小游戏基本信息

小游戏的开发拥有规定的发布流程，需要按流程操作。

✍️填写小游戏基本信息

  • 先填写小程序基本信息
  • 填写小游戏的名称、头像与简介 （简介需要合规，不能出现违规词汇）
    填写好后点击提交

设置小游戏类目信息

然后进行小游戏类目设置：

  • 添加类目并选择游戏->休闲游戏
  • 这样我们小游戏的发布流程的第一步就做好啦！

接下来就是开发了！我们选择自己开发

🧶下载安装IDE

先不要心急，所谓磨刀不误砍柴工。

为了帮助开发者简单和高效地开发和调试，
微信小程序微信官方在原有的公众号网页调试工具的基础上，
推出了全新的 微信开发者工具，
集成了公众号网页调试和小程序调试两种开发模式。

  • 首先我们需要下载并安装微信开发者工具
    [https://developers.weixin.qq.com/minigame/dev/devtools/download.html]
    开发者工具分为小程序版与小游戏版，这里推荐下载小游戏版。（小程序版开发小游戏有问题）
  • 下载并安装好后微信扫描二维码登录
  • 登陆后，界面如下：

💁🏻‍♂️新建项目

开发者工具下载安装完毕后，打开并新建项目。

  • 选择小游戏并选择第一个空白项目。

✍️填写项目基本信息

  • 其中AppID请到小程序管理页面，查看并复制填写到上面

💻初识IDE界面

创建好空白项目后，可以看到IDE场景如下：
目前我们最关系的是红框标记的三个，分别是：1.场景资源目录 ; 2.场景视图; 3.项目目录

新打开的项目默认创建了一个3D场景（Scene）

对于场景视图，我们可以:
1.使用鼠标左键 进行 拖动查看，
2.使用鼠标滚轮 进行 放大缩小

⌨️创建一个正方体

  • 在场景资源目录中，选择Main Camera,右键选择-创建3D节点->Mesh->Cube.

  • 这样我们就在场景种创建了一个正方体 （如果看不到可以试试在场景视图中用鼠标滚轮缩小视图）

  • 在场景资源目录选择正方体资源Cube_2并双击，就可以在右侧Inspector窗口看到Cube_2的具体信息。

  • 这里的参数你都可以按需编辑，为了后续演示时能够看到正方体，我们编辑有右边参数中 position.z=5.

💾保存场景

  • 然后ctrl+s先保存下这个场景
  • 可以看到项目目录中新增了一个scene格式的文件，双击demo.scene文件，就能重新打开场景视图。

📝加点脚本让正方体动起来

小游戏框架推荐使用 TypeScript 来编写小游戏逻辑。

📃新建脚本

  • 我们在项目目录新增一个脚本文件：
  • 命名并选择该文件，可以看到右侧Inspector窗口显示了脚本内容

🔗绑定脚本

  • 按住右键拖动脚本demo.ts到正方体Cube_2，即可将脚本绑定
  • 双击Cube_2,即可在右侧看到绑定的脚本信息

📑编辑脚本

  • 选择刚刚创建好的demo.ts,右键选择内置编辑器打开
  • 这样更方便我们的编辑

    可以看到该脚本主要有三个方法onAwake，onUpdate，onDestroy
  • 我们修改其中的onUpdate方法如下，并ctrl+s保存
public onUpdate(dt) {
  this.entity.transform.rotate(engine.Vector3.createFromNumber(15*dt, 30* dt, 45 * dt), true, false)
}

  • 然后关闭编辑器，并切换到之前的窗口,双击demo.ts，可以在右侧窗口查看到修改后的脚本
    这时候需要再次ctrl+s保存
  • 如果右侧未显示，可以先关闭Inspector标签，然后重新打开 （如下操作），感觉是一个bug


🤳🏿预览效果

  • 在工具界面上方有个播放按钮，点击后工具开始初始化小游戏容器，完成后即可进行预览
  • 这时候你就可以看到正方体动起来了！！！
  • 点击停止按钮就可以停止预览，回到编辑状态

🖨编译构建

回到编辑态后，我们开始进行编辑构建

  • 如下，选择构建工程打开Build窗口
  • 在Build窗口，点击选择任务
  • 然后勾选我们正在编辑的游戏工程，并点击开始构建
  • 填写基本的构建信息，并点击确定
  • 对于确认后的一切弹窗信息，都点击确定。过程比较耗时，请耐心等待
  • 最后会提示构建成功
  • 你可以选择点击本地调试，在本地浏览器中进行查看

📲真机调试

  • 在构建面板中，有真机调试按钮
  • 点击后会加载预览二维码

请使用微信客户端扫描打开

  • 首先在你会在手机端看到熟悉的小游戏界面
  • 并且PC端会弹出真机调试窗体 （很像浏览器的开发者有木有）
  • 移动端加载完成后，就可以看到啦！

👋🏿和我一起？

  *到这里我们的第一个小游戏就完成了！！！是不是很简单！*😎
  *最近正在学习如何开发小游戏，接下来会持续学习并第一时间在CSDN更新博客。*💪
  如果你也对小游戏开发感兴趣的话，不妨关注我，关注博主的小游戏开发专栏，一起体验小游戏开发的乐趣！！！

学习内容计划：

  • 小游戏开发申请流程
  • 小游戏开发环境搭建与工具使用
  • 小游戏开发原理与基础
  • 小游戏常用API
  • 小游戏开发实战
小游戏小程序codeliimg微信微信小程序

有关【小程序】快来开发你的第一个微信小游戏（详细流程）的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  3. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  4. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  5. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  6. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  7. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  8. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  9. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2

    刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr

  10. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

随机推荐