如何制作一个微信音乐小游戏

简介: 如何制作一个微信音乐小游戏

嗨!大家好,我是小蚂蚁。


这个小游戏的想法来源于女儿的一个打击玩具,我试着将其进行了一下还原,并做成了一个音乐小游戏。


下方为游戏的实现过程以及实现原理,大体上音乐小游戏的实现原理都类似,在了解并掌握一个后,你也能够做出自己的音乐小游戏。


为了尽可能的还原,我直接使用了真实的照片当作游戏的背景。



如图,我将这个打击小乐器放在了地板上,然后用手机拍摄了一张图片。


敲击棒的照片,是放在一张白纸上拍摄的,这样便于抠图。


好了,以上的两张图就是这个游戏中的所有的素材了。


接下来,我们来看一下实现一个这样的打击音乐小游戏的原理是什么。我们应该都有玩过这种类似的东西,当你使用小棒子敲击不同的“键位”时,会发出不同的声音。所以,要实现的东西其实很简单,在每个“键位”上都放置一个“精灵”,然后在“点击”精灵时,播放对应的音效即可。



最后,将所有的“精灵”的透明度设置为“0”,也就是让这些“精灵”都变为全透明的状态。



这样所有的“精灵”就都看不见了,只剩下打击乐器本身了。


对于这个小乐器的声音,我直接使用了微信小游戏制作工具自带的声音录制和剪辑工具,录制了它自己本来的声音,声音录制和剪辑非常的方便。


第一步,点击资源管理器中声音板块右上角的一个小麦克风按钮。



会弹出一个录制声音的对话框,点击“开始录制”后就可以直接录制声音了。



录制完声音后,可以直接对声音进行剪辑操作。剪辑完成后,点击“保存录音”,剪辑好的声音就会显示在“声音”板块中了。



下图是我录制并剪辑的这个小乐器的 8 个声音。



最后,为了让敲击的感觉更明显一点儿,在每次敲击时,都增加了一点儿粒子特效,所以,最终看起来是下面这个样子。


为了让小朋友可以轻松的敲出一首曲子,所以我又为其增加了一个小的功能,跟随者小星星进行演奏,依次点击小星星出现的位置,即可演奏出一首曲子啦!


相关文章
|
Web App开发 JavaScript iOS开发
js控制ios设备在微信打开网页时,自动播放音乐
实际情形: 今天在公司做一个微页的项目,涉及到在微信里面点击链接或者是扫描二维码,打开链接的时候,自动播放音乐。 这个功能是非常简单的,直接在HTML页面插入如下代码即可。
1519 0
微信公众号文章也可以添加音乐 不用因无法添加背景音乐代码而烦恼了
  之前我们有聊过用代码添加图文消息背景音乐,微信可能考虑安全问题一段时间后代码不能用了,现在好了,微信公众号文章也可以添加音乐了,直接在微信公众平台后台像添加图片一样直接就可以插入音乐,未经认证的公众号也可以使用这一功能。
1157 0
|
XML 数据格式 iOS开发
微信服务开发——读取百度音乐接口返回音乐
                        最近用了很多网上的坑爹接口,都泪奔了,不说了,都是泪啊~             前两天做了个微信返回音乐的接口,先来看下效果:                          出来之后在手机微信里面就可以实现音乐播放了。
1080 0
微信图文消息添加音乐一招搞定 只需修改背景音乐地址
  最近经常听网友问微信图文消息加音乐怎么弄,其实微信公众号添加音乐很简单,复制几行代码到公众平台图文素材中就能实现,只需修改一下背景音乐地址就可以了。   2015.6.6更新 微信公众号文章也可以添加音乐 不用因无法添加背景音乐代码而烦恼了   【通知:本方法已失效,在研究怎么嵌入qq音乐,可以试试微场景制作zuiku.
1033 0
|
14天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
14天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
14天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
14天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
1月前
|
小程序 前端开发 程序员
微信小程序开发入门教程-小程序账号注册及开通
微信小程序开发入门教程-小程序账号注册及开通

热门文章

最新文章