安装运行平台需要nodejs,具体方法请参照官方说明文档. 运行后打开了一个空空的窗口. 首先我们进行工程设置,菜单>工程>设置 菜单里面设置我们游戏的名称,到时候会显示在游戏的title上面,设置版本 这里其中关键的地方我们要设计一个竖屏的游戏,分辨率是640*960,游戏帧率设置为30帧,让编辑时和实际手机运行效果同等. 应用,生效设计到工程中. 保存我们当前未命名的场景到工作目录中,以后我们运用的所有变化就在这个场景之中了. 注意尽量少使用中文,毕竟大家都懂得..…

写在前面 本文实现一个简单的抽奖效果,使用青瓷qici引擎,其中应用了Tween动画,粒子系统,遮罩,UI界面布局,项目设置,发布等功能呢. 目前开发采用1.0.7版本,后续如果界面有所变化请参考这个版本. 所有开发H5的朋友都请先做些demo测试下你目标机的兼容性问题,以免开发好了后,跑不起来. 半年过去了,没想到地址都挂光了.看图片过过瘾吧2016-7-23 16:33:00 demo地址:帮朋友打点小广告,兑奖链接真实有效,微信中打开可以参与兑奖, <!--http://getgeekte…

背景图片 首先我们需要在当前场景下面创建UI的根节点,这个根节点决定了我们整个游戏的元素布局,以及适应多分辨率的缩放布局问题,所以我们其他的元素都要放在UIRoot下面. 考虑到我自己测试的时候在PC下面也想看得舒服,所以UIRoot的布局采用居中宽高比固定,然后在最下面Manual Type 设置为Expand 匹配宽或高,让显示区域在显示屏内填充满. 分辨率设置好了,我们现在来贴背景图.当前背景图为两张,一张是正常背景,用来显示玩的界面.一张背景图是较暗的,用来显示抽奖后烟火的效果. 在UI…

hello,小伙伴们,我们来继续编写相关的程序. 前几章我们已经基本把界面等问题搞定了,现在我们就来写脚本让整个流程统一起来. 看看我们现在有了什么?一个界面还有他的层次结构 青瓷界面绑定UI.js创建 化成关系图如下,我们调整一下, 因为背景应该上面抽出一层,作为公共背景,让这个背景来控制自己到底显示高亮还是暗黑 调整完毕后,我们来划分需要编写的逻辑,前面最高控制整个程序的是UIRoot我们为他创建一个脚本.下面每个脚本控制一个效果. 好的,我们来动手写程序.可以看到我们当前的目录结构如下,S…

现在是万事俱备,只欠东风,好,我们一起动手,先来东风东. 烟花粒子效果 第一个来实现我们的烟花粒子效果,点击我们的粒子,按照下图方式配置. 注意此时我们已经加入了white.png作为粒子特效使用. 这里有几个地方要注意的.在游戏后期发布的时候,我在我那战斗力只有5点的手机上面跑粒子效果,妥妥滴卡死.在优化方面考虑,删掉了ColorTint选项,没有了颜色变化,自然连下面Color over LifeSpan 颜色控制线也不需要了.不过我们现在为了自己PC看着爽,还是先勾上,到时候消除也来得及.…

素材链接… 我们准备好所有素材 青瓷的素材引入,可以通过拖动的方式.我们打开windows的资源管理器,所有素材拖动到texture里面 框架会帮你进行预处理方便加载 我们在atlas文件夹里面新建目录 一律添加@atlas结尾,这样系统就可以自动帮我们剪裁成雪碧图了(Sprite图,精灵图). 全部拖到刚刚新建的文件夹中 选择重新打包成图集, 我们使用的时候就可以通过图片的帧名来切换了 后面添加新文件,只需要在文件夹中把对应的文件拖到对应的工程文件夹中即可. 我们后面还会添加一个放烟花用的图片…

前言: 在上一篇文章中着重介绍了H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明等等,那么今天主要是涉及到场景的创建,loading的修改等等的代码编写. 对于这一节,我在讲解的过程中会使用到众多的类或对象,对于它们的具体用法,建议查看白鹭官方文档. 文档地址:http://edn.egret.com/cn/docs/page/639 修改Loading 上一节我们讲到即将创建场景createGameScene()的时候就结束了,这一节在我们正常创建场景之前,我们先修改一下l…

3月23日晚上8点半(中国队火拼韩国的时候),做了一期直播分享.15年做的一个小游戏,把核心代码拿出来,现场讲写了一遍,结果后面翻车了,写错了两个地方,导致运行效果有点问题,直播边说话边写代码还真不一样(可以理解为借口).我先贴出写错的两个地方. 1. //self.last['', ''];//重置 这个是写错的 self.last = ["",""];//重置 这个才是正确的 2. $sword.css({'-webkit-transfrom':'rotateX…

代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结合面向对象的编程思想进行开发,在实现时使用了部分es6语法,对于es6语法不太熟悉的小伙伴可以先查阅相关资料了解一下. 如有需要,可根据自己的需求修改源码样式.源码配置属性代码,实现个性化定制. 以下为文件目录结构示意图,核心代码在js文件夹下的四个common.js.main.js.game.js…

本系列文章对应游戏代码已开源 Sinuous game 上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API.这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果.这个过程更重要的是参透一些游戏开发的思路和想法,而不是仅仅知道怎么写代码来完成这个游戏. 先用一张图来了解一下整个游戏的构成. Map表示整个背景地图,作用很简单,就是渲染黑色背景.Player 表示玩家粒子,它尾巴中带有生命点,我们用Life类来表示.Enemy为红色的敌人粒子,因为技能粒子和Enemy粒子…

本系列文章对应游戏代码已开源 Sinuous game. 每个游戏都会包含场景和角色.要实现一个游戏角色,就要清楚角色在场景中的位置,以及它的运动规律,并能通过数学表达式表现出来. 场景坐标 canvas 2d的场景坐标系采用平面笛卡尔坐标系统,左上角为原点(0,0),向右为x轴正方向,向下为y轴正方向,坐标系统的1个单位相当于屏幕的1个像素.这对我们进行角色定位至关重要. Enemy粒子 游戏中的敌人为无数的红色粒子,往同一个方向做匀速运动,每个粒子具有不同的大小. 入口处通过一个循环来创建E…

前言: 昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题,今天着重介绍H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明,开始布局等等. 整体概况: 根据上一篇文章的提示,我们找到index.html,将帧率data-frame-rate修改成60.根据设计图宽高,我将data-content-width设成640,data-content-height设成1038: 就是下图不包括微信工具栏的高度.至于适配模式我先设成exactFit,以canvas的渲…

前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js.在移动前端方面,尤其是小游戏开始有一点点小经验了.但只是小经验,为什么说是小经验? 首先,深度不足,虽然用得最熟最多的白鹭,可是习惯了JavaScript,对TypeScript的OOP编程掌握得还不够:其次,对Egret等游戏框架了解的广度还不够,还有相当部分用法没用到.虽然能够应付朋友圈里传播的…

Egret白鹭H5小游戏开发入门(一)   前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js.在移动前端方面,尤其是小游戏开始有一点点小经验了.但只是小经验,为什么说是小经验? 首先,深度不足,虽然用得最熟最多的白鹭,可是习惯了JavaScript,对TypeScript的OOP编程掌握得还不够:其次,对Egret等游戏框架了解的广度还不够,还有相…

整体架构: InventionActivity:实现UI的实例化,基本的按钮Activity之间跳转 GameActivity:实现UI的实例化,Webview的基本使用 MyProgressDialog:UI进度对话框属性类 依赖库类: SystemBarTintManager + Config =  实现兼容版本沉浸状态栏 ----------------------我是天天酷涛--------------------------- Webview 运行加载 H5小游戏 Webview基本属…

将下面的代码拷贝到文本文件中,重命名文件为 cocos3.0创建工程.bat @echo off echo -------------------------create project with python----------------------------- set /p project_name= "Please enter your project name [for example: Runner] : " echo --------your project name…

坑点: 1) iOS 9.1 的safari中,在onTouchBegan方法中调用cc.audioEngine.playEffect播放音效是没有效果的,如果在onTouchEnded调用则是正常的,使用addTouchEventListener来播放也是正常的: 解决方案:在第一次addTouchEventListener回调方法里调用cc.audioEngine.playEffect()后再调用cc.audioEngine.stopAllEffects();之后在onTouchBegan方…

前言 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语法,个人认为以后 es6 语法会越来越普及,所以算是提前熟悉语法使用技巧.小游戏的实现逻辑上可能并不完善,也许会有一些 bug ,但是毕竟只是为了提升编程能力与技巧,希望大家不要太较真 作为第一次分享,我选择打砖块这个逻辑不算太复杂的小游戏.同时,为了接近真实游戏效果,在游戏中也添加了关卡,砖块血量…

人人都说前端用来做游戏是一件很困难的事情,遇到这些js的逻辑性问题,是不是有点懵?其实,做完一款游戏之后就会发现,没啥难的地方,差不多都是换汤不换药,作为爱玩游戏的我,也总结收集了几款比较流行的小软件,下面分享一波源代码,可直接在手机上打开,进入手机浏览器,就能够high起来了. 分享一波关于H5的小游戏 1:飞翔的小鸟 以前用unity3D写过类似于这款小游戏,现在看完这个,是一款基于jQuery+CSS3实现的小鸟飞翔动画特效源码,效果很好,流畅也不卡顿,适配于各种主流浏览器. 2:锅打灰太…

简单的小游戏制作,代码量只有两三百行.游戏可自行扩展延申. 源码已发布至github,喜欢的点个小星星,源码入口:game-snake 游戏已发布,游戏入口:http://snake.game.yanjd.top 第一步 - 制作想法 游戏如何实现是首要想的,这里我的想法如下: 利用canvas进行绘制地图(格子装). 利用canvas绘制蛇,就是占用地图格子.让蛇移动,即:更新蛇坐标,重新绘制. 创建四个方向按钮,控制蛇接下来的方向. 随机在地图上绘制出果子,蛇移动时"吃"到果子,增…

小游戏链接:测测你的眼睛对色差的辨识度http://www.webhek.com/post/color-test.html?from=timeline 废话不多说,先放代码: window.onload = function () { console.log("点击开始测试-------"); //点击开始按钮 var play = document.getElementsByClassName('play-btn'); play[0].click(); //获取画布盒子 // sle…

上一篇,水了近千字,很酸爽,同时表达了"重拾"一项旧本领并不容易,还有点题之效果.其实压缩起来就一句话:经过了一番记忆搜索,以及try..catch的尝试后,终于选定了Phaser 3.0作为我的小游戏开发引擎. 从这篇开始,我要开始拿出干货,进入实战.大家准备了好吗?一个字--干! 开发环境 首先说明一下,我的开发环境是VS Code + TypeScript.如果大家手头上没有用得比较顺手的TS开发环境,可以参考官微软方文档弄一个: https://code.visualstudi…

重开发人员的劳动成果.转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27706967 游戏中的基本元素 在曾经文章中,我们具体介绍了游戏开发的概念以及 Cocos2d-x 与其它游戏引擎的不同之处.甚至已经学会了它与众不同的 内存管理机制. 想必大家已经非常期待開始探索 Cocos2d-x 游戏开发的世界了. 在后面的文章中,我们将结合详细的实例,从 Cocos2d-x 游戏开发的基本元素讲起.  从这章開始,我会在学习…

重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27693365 复杂的内存管理 移动设备上的硬件资源十分有限,内存尤为宝贵.开发人员必须十分谨慎地利用内存,避免不必要的消耗.更要防止内存泄漏. 基于 Cocos2d-iPhone 的 Objective-C风格的内存管理是 Cocos2d-x 的一个特色. 把 Objective-C 的内存管理方式引入 C++,使得游戏开发的内存管理难度下降了个层次…

Cocos大作业:传统美食分分类 知识点清单: 场景切换,监听时间,碰撞组件及回调,拖动角色移动,分数记录,随机数和定时器,背景音乐控制,资源池控制,预制体,进度条... 源码+q:1431448323 效果图展示 游戏玩法如图所示 制作流程 场景切换 在按钮事件上 cc.director.loadScene('Play'); 拖动物体 挂载美食上即可 start () { this.node.on('touchmove',this.func1,this); } func1(t){ let p…

前些天看了一篇很赞的文章,又因为想学习phaser,所以有了这个案例,在线预览可以点下方链接. 本案例中,核心原理是按文章中所提到的内容制作,整体遵循"大道至简"的原则开发,其实是懒的去封装模块... 在线预览 文中代码可以访问本人github------ 关键技术点 除去上面提到的文章中的技术点外,还有几处需要注意的地方: 1. 元素渲染层级 开发时候不注意的话,某些情况下可能会出现后面的装饰物,被前面的挡住,或者是机器人被石头挡住等尴尬的局面.对此,不同的框架不同的处理方式,以ph…

使用了封装了canvas的create.js库来实现的. 最终效果: 工程: Rect.js /* * 方块类 */ function Rect(n,color,specialColor){ createjs.Shape.call(this); /** * 设置方块的类型 */ this.setRectType=function(type){ this._RectType=type; switch(type){ case 1: this.setColor(color); break; case…

搭建项目常用的方法属性,欢迎追加 三方: source 'https://github.com/CocoaPods/Specs.git' platform :ios, '8.0' use_frameworks! target 'swift' do pod 'SwiftyJSON', '~> 3.0' pod 'MJExtension', '~> 3.0.13' pod 'MBProgressHUD', '~> 1.0.0' pod 'AFNetworking', '~> 3.1.0…

$ python create-multi-platform-projects.py -p PompaDroid -k cn.philon.pompadroid -l cpp…

h5小游戏接微信的支付,简直是在为难我胖虎,说多了都是泪. 准备工作: 准备工作一定要做好,不然很容易出错.首先是session_key这个字段,这个session_key是登录的时候需要用到的,根据code从wx.login获取到.登录成功后直接用客户端保存起来,后面支付的时候要用来签名. 其次是access_token,这个access_token不是登陆验证用到的那个,我们先看看微信文档里面怎么说. 是不是很坑,但是支付的时候签名必须要access_token.首先我想到的是存到数据库中,…