首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

五毛的cocos2d-x学习笔记03-控件

---- 在讲今天的内容之前,需要了解几个概念:Director, Scene, Layer, Sprite, 本地坐标VS世界坐标,锚点,Z轴顺序。...Cocos2d坐标系和OpenGL坐标系一样,原点为屏幕左下角,x向右,y向上。   ...将一个节点添加到父节点里面时,需要设置其在父节点上的位置,本质上是设置节点的锚点在父节点坐标上的位置。   Layer添加子节点默认在(0,0),除非子节点用setPosition方法修改。...label = LabelTTF::create(); label->setString("Hello cocos2d-x"); label->setFontSize(36); //setPosition放置的是...label的锚点,而label的锚点默认是(0.5, 0.5),在label的正中间 //下面这条语句将label放在屏幕的正中间 label->setPosition(visibleSize.width

63150

unity3d-UGUI

UGUI不需要绑定Colliders,UI可以自动拦截事件 UGUI的Anchor是相对于父对象,没有提供高级选项 UGUI没有Atlas一说,使用Sprite Packer UGUI的Navigation...属性 Render Mode(渲染方式) Screen Space-Overlay覆盖模式:UI元素将绘制在其他元素之前,且绘制过程独立于场景元素和摄像机设置,画布尺寸由屏幕大小和分辨率决定。...(一般PC上会使用这种方式,因为PC端分辨率差异并不大。)...属性 使图片的一部分显示在Raw Image组件里。X和Y属性指定图片左下角的位置,W和H属性指定图片右上角的位置。...应用 使用Raw Image 制作小地图 制作一个小地图 将相机放置在地图的正上方,可以设置Culling Mask(遮挡剔除) 创建一张Render Texture,将Target Texture属性指向这张纹理

2.9K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    laya2d 与 cad 之间的坐标转换 坐标系基本概念在 Laya 中显示 cad 坐标对象

    在 Laya 中显示 cad 坐标对象 基本原则:不改变数据坐标,改变Laya 容器坐标。...保持根容器不变,变换子容器坐标原点位置 缩放子容器坐标比例 // 例如,我们 Laya 容器坐标系位置变换为屏幕左下角开始的右手坐标系 let drawingSp = new Laya.Sprite()...其中很重要的一点是: 在未对子容器的坐标系进行变化处理时,子容器的坐标系默认与容器重合。容器的缩放以容器的坐标原点为中心完成。 这也是我们多容器操作的基础。...坐标系处理,对子容器 viewSp 处理 let viewSp = new Laya.sprite(); // sp 坐标移动到左下角,并给一定的偏移 viewSp.pos(xoffset, Laya.Browser.Height...); // 等比例缩放,将容器放大或缩小以适应展示数据 通过以上转换,我们就可以将数据在当前屏幕上显示。

    1.7K30

    Unity 2D 手册部分翻译

    这让你可以看见场景,然后容易的放置2D物体。 2D组件的完整列表,如何在2D和3D模型间切换,2D和3D模型设置的差别,参看 2D或3D项目 2D图形 在2D里图形对象叫做Sprites。...Unity提供了一个内置的 Prite Editor 来让你从一个大图片里提取sprite图形。这个工具支持你在图形编辑器里,编辑包含在一个单独纹理里的一批组件图像。...使用它可以在2D和3D场景里把图片作为Sprites 显示。 Sprite Packer 使用Sprite Packer优化你的项目的功能以及显示内存的性能。...导入和设置Sprites Sprites 在Unity项目里是一种 Asset 。你可以通过 Project 面板 看到、准备它们。...图例1:设置Texture Type为Sprite(2D and UI),在资源的inspector里

    2.3K50

    【愚公系列】《AIGC辅助软件开发》034-AI辅助开发跑酷游戏:代码实现

    创建一个新项目,或者在现有项目中创建一个新的场景。 2. 导入背景图片资源到项目中。 3. 创建一个节点作为背景的父节点,并添加两个子节点用来放置背景图片。 4. 编写脚本来控制背景的滚动。...你提到的问题是背景图在滚动过程中可能出现断裂或不连续的问题。这通常是因为背景图本身不是无缝的纹理,或者在滚动时没有正确处理其衔接部分。...如果背景图在左右或上下两侧衔接部分存在明显断层,滚动时就会看起来不连续。你可以使用图像编辑工具(如 Photoshop 或 GIMP)对背景图进行编辑,使它们在边缘无缝衔接。...在属性检查器中,将 `Bg1` 和 `Bg2` 节点拖动到脚本的对应属性中。...根据你项目的实际需求,选择适合的方式来实现无缝背景滚动效果。

    11410

    Cocos论坛九问九答

    ,在需要使用的地方使用requre引入 方案2:将三方库放入assets,选中js代码文件,在属性编辑器上勾选“导入为插件”,大多三方库导入的模块为全局变量,类似你在index.html中导入 方案3:...在工程目录下创建一个build-templates目录,对应build工程目录结构,构建时将三方库复制到构建工程中,创建自己的index.html模板,但是在调试时对三方库的使是会报错的。...强烈不推介这种方式。 方案4:可以使用npm管理三方库,代码中使用requre引入,但官方不推介使用npm,会有冗余代码在项目中,这个有点不爽。...在选中构建的时候选中调试模式怎么去掉左下角的 信息! 问: ? 答:构建时关闭调试模式 ? 再问:我是说, 在我需要开启调试模式的情况下. 再答:不好意思!...(sprite.node === node); // sprite内部操纵node 如果你觉得上面的方式创建一个Sprite很麻烦,你可以将他封装一下,可以尝试下面的方法: cc.createComponent

    1.6K30

    Cocos Creator 性能优化:DrawCall

    静态合图 静态合图就是在开发时「将一系列碎图整合成一张大图」。...举个栗子,我这里有一个由 10 张碎图和 1 个文本所组成的弹窗(假设都使用同样的渲染方式): 在不做任何优化且未开启动态合图的情况下,渲染这个弹窗需要 11 个 DrawCall。...得不偿 下面介绍两种打包静态图集的方式: 自动图集资源(Auto Atlas) 利用 Cocos Creator 内置的自动图集资源来将碎图打包成图集。...也可以在代码中禁用该选项: let sprite = this.node.getComponent(cc.Sprite); let texture = sprite.spriteFrame.getTexture...UI 层级调整 除了以上的优化方案,我们还可以在游戏场景中下功夫,将性能优化做到极致。

    4.4K20

    连“捉阔”是什么都不知道就不要混了!如何优化看这里!

    静态合图 静态合图就是在开发时「将一系列碎图整合成一张大图」。...举个栗子,我这里有一个由 10 张碎图和 1 个文本所组成的弹窗(假设都使用同样的渲染方式): 在不做任何优化且未开启动态合图的情况下,渲染这个弹窗需要 11 个 DrawCall。...下面介绍两种打包静态图集的方式: 自动图集资源(Auto Atlas) 利用 Cocos Creator 内置的自动图集资源来将碎图打包成图集。...也可以在代码中禁用该选项: let sprite = this.node.getComponent(cc.Sprite); let texture = sprite.spriteFrame.getTexture...UI 层级调整 除了以上的优化方案,我们还可以在游戏场景中下功夫,将性能优化做到极致。

    2.2K10

    用 Compass 分分钟地做图片精灵

    修改都是在 psd 上改,然后导出。 如果用 Compass ,只需写如下几行代码 1 创建图片精灵图片。可以用 sprite-map($glob, [配置1,] [配置2,][ ...])...如: $sprites: sprite-map('icons/*.png', $spacing: 10px, $layout: 'vertical'); 上面代码的意思是:将 config.rb 中配置的...images_dir 路径下的 icons/ 文件夹下所有的 png 图片做成图片精灵,图标垂直放置,图标之间的垂直间距为 10px。...; } .icon--facebook{ $iconPath: sprite-file($sprites, 图标文件名称(不包含文件拓展名)); // 图标文件的路径 width: image-width..., $图标文件名称), 2);// 因为是垂直放的 } .icon--flickr{ $iconPath: sprite-file($sprites, 图标文件名称(不包含文件拓展名)); //

    1.1K30

    一个没有对手的英雄是什么体验?如何在你的Python游戏中添加反派

    在开始之前,请确保您有敌人的图像文件,即使这只是临时图像也可以。 把图像文件放在你工程中的images目录里 (跟放置Player图片的目录是一样的). 如果画面生动活泼,那么游戏看起来会好很多。...进行编程时,必须提前规划好才行,以便你的游戏可以随着你对编程的更多了解而发展,这一点很重要。即使你还没有一个完整level规划,您也应该编写代码,就像您打算拥有多个level一样....你怎么知道自己在游戏中处于某哪一个level嘞? 您可以将关卡视为项目的集合。 在一个平台游戏中(例如你在此处构建的平台游戏),关卡由平台的特定布置,敌人和战利品的放置等组成。...敌人的子画面无法计数,因此你必须创建一个变量来跟踪敌人移动了多少步伐,并根据计数变量的值对敌人进行编程以使其向右或向左移动. 首先,在您的Enemy类中创建计数器变量。...这是一个问题,但是在使用Python进行更多练习之后,你将在以后解决这个问题。 现在,尝试添加更多敌人。 记住将每个敌人添加到enemy_list中。

    1.7K40

    一看就懂 - 从零开始的游戏开发

    在介绍 ECS 之前,我们先来与熟悉的 OOP 对比一下: Procedural Programming & Object Oriented Programming 国内很多高校,都是以 C 语言开始第一门编程语言的教学的...,对应的编程范式,一般被称为「「面向过程」」;而到了 C++ 这里,引入了「类/对象」的概念,因此也被称为「「面向对象」」编程 Eg: 「我吃午饭」 // Procedural Programming...这也就意味着,我们可以简单地把当前整个游戏的状态生成快照,也可以简单地将快照还原到整个游戏当中(这点对于多人实时网游而言,非常重要) 「表现与逻辑的抽离」:组件分离的方式天生适合逻辑和表现分离。...对于 moba 游戏而言,比较自然的操作方式是「轮盘」。...但只有一个角色,游戏是玩不起来的,下一步我们就需要往游戏内加入一个个的 AI 角色 我们将随机生成 Position (x, y) 的位置,如果该位置对应的是空地,那么则把 AI 玩家放置在此处 initPlayer.ts

    1.2K30

    three.js 事件交互

    点击查看交互效果 在three.js中,展示的一切内容都是在canvas中绘制的,所以点击事件点击到物体上是无法获取点击对象的,要获取点击的对象,要使用RayCaster,是用于在三维空间中进行鼠标拾取...raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onMouseMove( event ) { // 将鼠标位置归一化为设备坐标...(0, 2, 5); sprite.scale.set(20, 2, 1); sprite.name = spriteName; 在点击的时候或者这个名字 alert(selectObject.name...sprite.center.set(0.5, 0.5); //精灵的center设定是基于精灵的大小的,精灵的的左下角为(0,0),x轴的右边与y轴的上方为正 sprite.scale.set...THREE.Raycaster(); var mouseVector = new THREE.Vector2(); function getIntersects(x, y) { //将鼠标位置转换成设备坐标

    14.3K90

    three.js 事件交互 原

    在three.js中,展示的一切内容都是在canvas中绘制的,所以点击事件点击到物体上是无法获取点击对象的,要获取点击的对象要使用RayCaster,用于在三维空间中进行鼠标拾取,原理是:相机与鼠标所在的设备坐标之间的连线经过哪些物体...raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onMouseMove( event ) { // 将鼠标位置归一化为设备坐标...(0, 2, 5); sprite.scale.set(20, 2, 1); sprite.name = spriteName; 在点击的时候显示这个名字 alert(selectObject.name...sprite.center.set(0.5, 0.5); //精灵的center设定是基于精灵的大小的,精灵的的左下角为(0,0),x轴的右边与y轴的上方为正 sprite.scale.set...THREE.Raycaster(); var mouseVector = new THREE.Vector2(); function getIntersects(x, y) { //将鼠标位置转换成设备坐标

    3.8K30

    CSS遮罩的过渡效果有趣的幻灯片

    与裁剪一起,遮罩是定义可见性和与元素合成的另一种方式。在下面的教程中,我们将向您展示如何在简单的幻灯片上应用现代过渡效果的新属性。...创建蒙版图像 在本教程中,我们将通过第一个示例(演示1)。 为了使遮罩过渡效果起作用,我们需要一个图像来隐藏/显示底层图像的某些部分。该蒙版图像将是一个带有透明部分的PNG。...标记 对于我们的演示,我们将创建一个简单的幻灯片来显示蒙版效果。我们的幻灯片会填满整个屏幕,我们会添加一些箭头来触发幻灯片切换。这个想法是叠加幻灯片,然后在动画结束时更改传入幻灯片的z-index。...我们将设置一个经典的全屏滑块的布局,一些居中的标题和导航在页面的左下角。此外,我们将定义一些媒体查询以适应移动设备的风格。...我们希望我们的精灵在我们最后一帧的开始处停下来。

    3.3K90

    Tensorboard 高维向量可视化

    本节将展示在训练 100 轮和 10000 轮之后,测试数据经过整个神经网络得到的输出层向量通过 PROJECTOR 得到的可视化结果。...为了在 PROJECTOR 中更好地展示 MNIST 图片信息以及每张图片对应的真实标签,PROJECTOR 要求用户准备一个 sprite 图像(所谓 sprite 图像就是将一组图片组合成一整张大图片...28)) sprite_image = create_sprite_image(to_visualise) # 将生成的sprite图片放到相应的日志目录下 path_for_mnist_sprites...在 PROJECTOR 界面的左下角提供了不同的高维向量的可视化方法,目前主要支持的就是 T-SNE 和 PCA。...无论是 T-SNE 还是 PCA 都可以将一个高维向量转化成一个低维向量,井尽量保证转化后向量中的信息不受影响。 在 PROJECTOR 的右侧还提供了高亮功能。

    1.5K30

    【100个 Unity实用技能】☀️ | Unity中 过滤透明区域的点击事件

    像素检测 过滤透明区域 这种方法是通过读取Sprite在某一点的像素值(RGBA),如果该点的像素值中的Alpha小于一定的阈值(比如0.5)则表示该点是透明的,即用户点击的位置在精灵边界以外,否则用户点击的位置在精灵边界内部...准备两个带有透明度的切图,然后放置到场景的Button组件上,测试代码如下: using UnityEngine; using UnityEngine.UI; public class UnityImageAlphaTest...将两个Button挂载到脚本中,第一个Button不参与透明过滤,第二个Button过滤透明区域点击事件。...Image>(); } public bool IsRaycastLocationValid(Vector2 sp, Camera eventCamera) { //将选中的点转换为...//Color c = _image.sprite.texture.GetPixel((int)uv.x, (int)uv.y); //用于在纹理上执行双线性插值以获取像素颜色值,这个方法使用双线性插值算法来估算纹理中某个位置的颜色

    67121
    领券