- 浏览: 26497 次
最新评论
本文为 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 712本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 依赖注入
2016-09-28 17:10 645本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— Select(选择框)
2016-09-23 17:14 827本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 控制器
2016-09-21 17:22 597本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 简介(10)
2016-09-14 17:41 530本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— 与php服务器
2016-09-12 17:49 1290本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS自动JSB绑定规则修改
2016-09-09 18:08 1189本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 —— 资源打包工具的使用及资源的异步加载处理
2016-09-08 17:45 775本文为 HTML5培训 机构官方 HTML5培训 教程,主要介 ... -
JavaScript强化教程 —— Cocos2d-JS极速调试技巧
2016-09-05 16:18 874本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS游戏快速接入微信JS-SDK
2016-09-02 16:07 1045本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程—— 内置粒子系统
2016-08-29 16:00 769本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——JavaScript Math(算数) 对象
2016-08-26 16:33 561本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
2016-08-25 16:25 1211本文为 H5EDU 机构官方 HT ... -
CSS基础教程 -- 媒体查询屏幕适配
2016-08-22 15:15 1103本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JQuery强化教程 —— jQuery Easing
2016-08-18 14:54 813本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
fullPage教程 -- 整屏滚动效果插件 fullpage详解
2016-08-17 15:21 834本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——获取内容和属性
2016-08-15 15:35 470本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——jQuery 动画2
2016-08-12 14:12 631本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
bootstrap教程(二) —— 列表组listgroup
2016-08-11 14:46 644本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
bootstrap教程(二)——导航条
2016-08-08 16:22 549本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ...
相关推荐
3. **场景切换**:在切换场景时,可能涉及到加载新的全景图资源,这可以通过photo-sphere-viewer.js的`load`方法完成。在加载新图的同时,可能需要保存当前的视角信息,以便在新图加载完成后能够平滑地过渡到相应的...
本文将深入探讨如何使用three.js和photo-sphere-viewer.js库来实现全景场景切换,以及如何将其应用于全景家居展示。 首先,`three.js`是一个流行的JavaScript 3D库,它为浏览器中的3D图形渲染提供了强大的支持。它...
JavaScript教程--从入门到精通(PPT精简版).ppt
JavaScript应用实例-切换IP.js
JavaScript应用实例-001-Hello JS.js
"three.js"是一个流行的JavaScript库,专门用于在浏览器中进行3D图形渲染,而"photo-sphere-viewer.js"则是一个与three.js结合使用的插件,用于展示全景图像和场景。下面将详细解释这两个技术以及如何在实际项目中...
JavaScript应用实例-遍历文件夹.js
JavaScript应用实例-js查询.js
JavaScript应用实例--控件集合.js
JavaScript应用实例-微信滑块.js
JavaScript应用实例-卸载应用.js
JavaScript应用实例-悬浮窗.js
JavaScript应用实例-进制计算器.js
JavaScript应用实例-转流星.js
JavaScript应用实例-拯救你.js
JavaScript应用实例-帧布局.js
JavaScript应用实例-追击预判.js
JavaScript应用实例-有缘网.js
JavaScript应用实例-易码api.js
JavaScript应用实例-占用空间.js