- 浏览: 28107 次
-
最新评论
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— cocosjs场景切换
场景切换
在main.js,将StartScene作为我们初始化运行的场景,代码如下:
cc.LoaderScene.preload(g_resources, function () {
cc.director.runScene(new PlayScene());
}, this);
在StartScene的开始菜单按钮的响应函数中加入场景切换代码。点击开始按钮切换场景进入到我们的PlayScene。代码如下:
var startItem = new cc.MenuItemImage(
res.Start_N_png,
res.Start_S_png,
function () {
cc.log("Menu is clicked!");
cc.director.replaceScene( cc.TransitionPageTurn(1, new PlayScene(), false) );
}, this);
cc.director用来获取导演单例实体,cc.TransitionPageTurn创建了一个翻页效果的场景切换动画,当然你也可以不使用转场动画。直接传入new SecondScene()。
Cocos2d-JS中场景之间通过TransitionScene系列类来实现过渡跳转的效果。TransitionScene继承于Scene,该系列类主要是与场景切换特效相关的一些使用类。如TransitionFadeDown、TransitionPageTurn、TransitionJumpZoom等等。
注意:转场动画需要小心浏览器的兼容性。比如翻页效果就在浏览器上不支持
场景切换
在main.js,将StartScene作为我们初始化运行的场景,代码如下:
cc.LoaderScene.preload(g_resources, function () {
cc.director.runScene(new PlayScene());
}, this);
在StartScene的开始菜单按钮的响应函数中加入场景切换代码。点击开始按钮切换场景进入到我们的PlayScene。代码如下:
var startItem = new cc.MenuItemImage(
res.Start_N_png,
res.Start_S_png,
function () {
cc.log("Menu is clicked!");
cc.director.replaceScene( cc.TransitionPageTurn(1, new PlayScene(), false) );
}, this);
cc.director用来获取导演单例实体,cc.TransitionPageTurn创建了一个翻页效果的场景切换动画,当然你也可以不使用转场动画。直接传入new SecondScene()。
Cocos2d-JS中场景之间通过TransitionScene系列类来实现过渡跳转的效果。TransitionScene继承于Scene,该系列类主要是与场景切换特效相关的一些使用类。如TransitionFadeDown、TransitionPageTurn、TransitionJumpZoom等等。
注意:转场动画需要小心浏览器的兼容性。比如翻页效果就在浏览器上不支持
发表评论
-
JavaScript强化教程 —— 对象创建模式
2016-10-09 17:12 808本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 依赖注入
2016-09-28 17:10 714本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— Select(选择框)
2016-09-23 17:14 898本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 控制器
2016-09-21 17:22 660本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 简介(10)
2016-09-14 17:41 598本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— 与php服务器
2016-09-12 17:49 1355本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS自动JSB绑定规则修改
2016-09-09 18:08 1251本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 —— 资源打包工具的使用及资源的异步加载处理
2016-09-08 17:45 845本文为 HTML5培训 机构官方 HTML5培训 教程,主要介 ... -
JavaScript强化教程 —— Cocos2d-JS极速调试技巧
2016-09-05 16:18 1018本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS游戏快速接入微信JS-SDK
2016-09-02 16:07 1131本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程—— 内置粒子系统
2016-08-29 16:00 837本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——JavaScript Math(算数) 对象
2016-08-26 16:33 632本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
2016-08-25 16:25 1281本文为 H5EDU 机构官方 HT ... -
CSS基础教程 -- 媒体查询屏幕适配
2016-08-22 15:15 1165本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JQuery强化教程 —— jQuery Easing
2016-08-18 14:54 870本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
fullPage教程 -- 整屏滚动效果插件 fullpage详解
2016-08-17 15:21 886本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——获取内容和属性
2016-08-15 15:35 503本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——jQuery 动画2
2016-08-12 14:12 668本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
bootstrap教程(二) —— 列表组listgroup
2016-08-11 14:46 683本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
bootstrap教程(二)——导航条
2016-08-08 16:22 585本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ...
相关推荐
本文将深入探讨如何使用three.js和photo-sphere-viewer.js库来实现全景场景切换,以及如何将其应用于全景家居展示。 首先,`three.js`是一个流行的JavaScript 3D库,它为浏览器中的3D图形渲染提供了强大的支持。它...
JavaScript教程--从入门到精通(PPT精简版).ppt
JavaScript应用实例-切换IP.js
JavaScript应用实例-001-Hello JS.js
JavaScript应用实例-UI切换.js
"three.js"是一个流行的JavaScript库,专门用于在浏览器中进行3D图形渲染,而"photo-sphere-viewer.js"则是一个与three.js结合使用的插件,用于展示全景图像和场景。下面将详细解释这两个技术以及如何在实际项目中...
JavaScript应用实例-遍历文件夹.js
JavaScript应用实例-js查询.js
JavaScript应用实例-sha256.js
这个压缩包“cocos2d-x-cocos2d-x-2.2.2.zip”包含了cocos2d-x 的2.2.2版本,该版本是cocos2d-x发展中的一个重要里程碑,它提供了许多改进和优化,使得开发者能够更加高效地创建2D游戏和应用。 在cocos2d-x 2.2.2中...
JavaScript应用实例-微信滑块.js
JavaScript应用实例-请求体.js
JavaScript应用实例-求差集.js
JavaScript应用实例-抖音关注.js
JavaScript应用实例-微信点赞.js
JavaScript应用实例-坐标显示器.js
JavaScript应用实例-找图.js
JavaScript应用实例-卸载应用.js
JavaScript应用实例-悬浮窗.js
JavaScript应用实例-进制计算器.js