cocos creator绘制网格背景(基于矢量绘图)

news2025/4/7 21:00:41

在2D游戏开发中,设计2D地图的背景实现通常有以下几种方式:

  1. 静态背景图

    1. 最简单的方式是使用静态背景图,即将整个背景作为一个静态图像加载到游戏中。这种方式适用于简单的游戏或者背景不需要变化的场景。

  2. 平铺背景图

    1. 可以使用平铺背景图的方式,将一个小背景图无限水平或垂直地重复铺设,以填充整个背景。这种方法适用于需要无缝滚动的场景,比如横版射击游戏或无尽跑酷游戏。

  3. 瓦片地图(Tilemaps)

    1. 类似于游戏地图的实现方式,可以使用瓦片地图来创建背景地图。通过将背景拆分成小块瓦片并进行平铺,可以创建复杂的背景效果。

  4. Parallax(视差滚动)效果

    1. 视差滚动效果是一种常见的背景实现方式,通过在不同速度下滚动多层背景图层来营造出深度感和动态效果。这种方式可以增加游戏场景的立体感和视觉吸引力。

  5. 动态背景生成

    1. 有些游戏可能需要动态生成背景,根据游戏逻辑或玩家行为实时生成背景元素。这种方式适用于需要动态变化的场景,比如无尽奔跑游戏或飞行射击游戏。

  6. 基于矢量绘图

    1. 使用矢量绘图来创建游戏地图是另一种常见的方式。通过绘制矢量图形,可以创建可缩放的地图,而不会失真。这种方法通常用于需要高度可定制化的地图。

下面所展示的是基于矢量绘图,在Cocos creator中就是利用Graphics组件来绘制网格和纯色背景。

drawBackground() {
        //清除绘制
        this.graphics.clear();
        //设置填充颜色
        this.graphics.fillColor = cc.Color.WHITE;
        //绘制矩形背景
        this.graphics.fillRect(-cc.winSize.width/2,-cc.winSize.height/2, cc.winSize.width, cc.winSize.height);
        //设置线段颜色和宽度
        this.graphics.strokeColor = cc.Color.GRAY;
        this.graphics.lineWidth = 2;
        //绘制竖线
        for(let i = 0 ; i<cc.winSize.width ; i+= this.width){
            this.graphics.moveTo(-cc.winSize.width/2 + i,-cc.winSize.height);//起点
            this.graphics.lineTo(-cc.winSize.width/2 + i,cc.winSize.height/2);//终点
        }  
        //绘制横线
        for(let i = 0 ; i<cc.winSize.height ; i+= this.height){
            this.graphics.moveTo(-cc.winSize.width/2, cc.winSize.height/2 - i);
            this.graphics.lineTo(cc.winSize.width/2, cc.winSize.height/2 - i);
        }    
        this.graphics.stroke();
    }

注:该示例绘制的尺寸为屏幕尺寸。

上述代码所绘制出的效果如下:

并且可以不用纯色背景,而是使用了平铺图像作为背景,该实现方式只需要把图像的zIndex设为-1,然后尺寸设置为地图尺寸即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1977611.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Mathematica 矩阵基础操作指南

使用 Mathematica 进行矩阵操作的指南 目录 使用 Mathematica 进行矩阵操作的指南引言创建矩阵矩阵运算加法与减法 矩阵乘法矩阵转置逐元素运算 矩阵的行列式与逆行列式逆矩阵 矩阵分解LU 分解QR 分解特征值与特征向量 矩阵的可视化矩阵的热图矩阵的网格图 末 引言 最近笔者在…

分布式事务-使用队列实现最终一致性

分布式事务-扣减库存 一、最终一致性架构图 1、服务 左侧&#xff1a;创建订单服务Server1 右侧&#xff1a;扣减库存服务Server2 中间&#xff1a;独立消息服务Server3 2、中间件&#xff1a; Kafka-MQ、MySQL-db 二、步骤 0、定义MQ&#xff0c;三个状态 prepareconf…

spring原理(自学第八天)

aop的实现原理 AOP 底层实现方式之一是代理&#xff0c;由代理结合通知和目标&#xff0c;提供增强功能 除此以外&#xff0c;aspectj 提供了两种另外的 AOP 底层实现&#xff1a; 第一种是通过 ajc 编译器在编译 class 类文件时&#xff0c;就把通知的增强功能&#xff0c;织…

传输层_计算机网络

文章目录 运输层UDPTCPTCP连接管理TCP三次握手TCP四次挥手 可靠机制流量控制拥塞控制 QUIC 运输层 网络层提供了主机之间的逻辑通信 运输层为运行在不同主机上的进程之间提供了逻辑通信 UDP(用户数据报协议)提供一种不可靠、无连接的服务&#xff0c;数据报 TCP(传输控制协议)…

【Linux详解】基础IO:软硬连接 | 动静态库管理

目录 软硬链接 1. 介绍 2.理解 2.1 如何理解硬链接&#xff1f; 2.2 如何理解软连接&#xff1f; 动静态库 1.介绍 1.1 使用 1.2 什么是库&#xff1f; 2.生成 2.1 静态库 2.2 动态库&#xff1a; 软硬链接 1. 介绍 1.1 软连接 是一个独立文件&#xff0c;具有独…

Stable Diffusion绘画 | 文生图-高分辨率修复-Hires.fix

开启「高分辨率修复」的作用是&#xff0c;提高图片分辨率&#xff0c;增加细节&#xff0c;从而让画面变得更清晰。 之所以不采取直接通过调整宽高来提高分辨率&#xff0c; 是因为绝大多数模型在训练时&#xff0c;精度都是 512x512&#xff0c;如果生成图片时&#xff0c;直…

云仓酒庄新纪元:雷盛红酒LEESON 401澳洲赤霞珠盛大发布

云仓酒庄新纪元&#xff1a;雷盛红酒LEESON 401澳洲赤霞珠盛大发布 在全球酒业市场的激烈竞争中&#xff0c;云仓酒庄始终以其敏锐的市场洞察力和卓越的产品品质引领行业潮流。近日&#xff0c;云仓酒庄宣布其精心筹备的雷盛红酒LEESON 401系列——澳洲原瓶进口赤霞珠正式上线…

API 接口设计原则:RESTful 与 GraphQL

RESTful 接口 REST 的全称是 REpresentational State Transfer&#xff0c;是一种 Web API 的设计风格 RESTful API 设计 6 大原则 一个 RESTful 风格的接口应该满足如下的 6 点原则&#xff1a; 统一接口&#xff1a;For example, the HTTP-based REST APIs make use of th…

小巧免费的笔记本电池检测工具

BatteryInfoView是一款免费的笔记本电池检测软件&#xff0c;适用于笔记本电脑和上网本。该软件能够提供电池的详细信息&#xff0c;包括电池名称、制造商名称、序列号、制造日期、电源状态&#xff08;充电/放电&#xff09;、当前电池容量、完全充电容量、设计容量、充电放电…

区块链核心概念与技术架构简介

引言 区块链&#xff0c;一种分布式账本技术&#xff0c;不仅为数字货币提供了基础设施&#xff0c;更在金融、供应链、物联网等多个领域展现出广泛的应用前景。区块链技术被认为是继蒸汽机、电力、互联网之后&#xff0c;下一代颠覆性的核心技术。 如果说蒸汽机释放了人们的…

Radxa ROCK 5B+开发板使用4G模块(移远EC200A)

目录 1、移远EC200A介绍2、ROCK 5B安装模组3、bsp编译内核4、使用4G模块拨号上网5、注意事项 前一篇博客&#xff1a;Radxa ROCK 5B开发板基本配置和上手测试 1、移远EC200A介绍 EC200A 系列是移远通信专为 M2M 和 IoT 领域设计的 LTE Cat 4 无线通信模块&#xff0c;采用 3G…

萱仔大模型学习记录5-langchain实战

前面我的bertlora微调已经跑出了不错的结果&#xff0c;我也学会了如何在bert上使用Lora进行微调&#xff0c;我后续会补充一个医疗意图识别的项目于这个系列&#xff0c;现在这个医疗意图识别代码还暂时不准备公开。我就继续按照我的计划学习一番LangChain。 LangChain是一个用…

yolov5 part2

two-stage &#xff08;两阶段&#xff09;&#xff1a;Faster-rcnn Mask-Rcnn系列 one-stage &#xff08;单阶段&#xff09;&#xff1a;YOLO系列 最核心的优势&#xff1a;速度非常快&#xff0c;适合实时监测任务。但是缺点也有&#xff0c;效果可能不好 速度较慢在2018…

Http自定义Header导致的跨域问题

最近写一个小项目&#xff0c;前后端分离&#xff0c;在调试过程中访问远程接口&#xff0c;出现了CORS问题&#xff0c;接口使用的laravel框架&#xff0c;于是添加了解决跨域的中间件&#xff0c;但是前端显示仍存在跨域问题&#xff0c;以为自己写的有问题&#xff0c;检查了…

等待唤醒机制两种实现方法-阻塞队列

桌子上有面条-》吃货执行 桌子上没面条-》生产者制造执行 1、消费者等待 消费者先抢到CPU执行权&#xff0c;发现桌子上没有面条&#xff0c;于是变成等待wait状态&#xff0c;并释放CPU执行权&#xff0c;此时的CPU肯定会被厨师抢到&#xff0c;初始开始做面条&#xff0c;…

南京观海微电子----使用运算放大器过零检测器电路图

使用运算放大器的过零检测电路 过零检测电路是运算放大器作为比较器的一种应用。它用于跟踪正弦波形在越过零电压时从正变为负或从负变为正的变化。它也可以用作方波发生器。过零检测器有许多应用&#xff0c;如时间标记发生器、相位计、频率计数器等。过零检测器可以用多种…

基于FPGA的数字信号处理(22)--进位保存加法器(Carry Save Adder, CSA)

目录 1、拆解多个数的加法 2、进位保存加法器 3、CSA的优点和缺点 4、CSA电路的实现 文章总目录点这里&#xff1a;《基于FPGA的数字信号处理》专栏的导航与说明 1、拆解多个数的加法 考虑3个4bits数相加&#xff0c;10 4 7 21 的过程是这样的&#xff1a; 其中的红色数…

【树莓派】初始化配置(自动连wifi,自动开启SSH)换清华源,远程桌面连接

@TOC 【树莓派】初始化配置(自动连wifi,自动开启SSH)换清华源 一 .烧录系统 二 .自动连wifi,自动开启SSH 三.插电启动派 四.找到树莓派的IP,SSH连接(默认账密 pi:raspberry) 五.更改清华源 注意:按快捷键ctrl+x,会提示是否保存,按Y键确认即可 1.sudo nano /etc/apt/sourc…

java面向对象编程入门

一、前言&#xff1a; 在Java中&#xff0c;面向对象编程&#xff08;Object-Oriented Programming, OOP&#xff09;是一种核心的编程范式。Java的设计和开发都是基于面向对象的思想。面向对象编程的主要目的是提高代码的可重用性、灵活性和可维护性。以下是Java面向对象编程…

在windows本地机搭建gitlab

在windows本地机搭建gitlab 1. 解决方案2. docker安装gitlab2.1 下载Docker Desktop2.2 安装gitlab的docker2.3 配置gitlab网页2.3 配置gitlab配置文件 3. frp端口转发4. ssh密钥配置5. 运行 1. 解决方案 注&#xff1a;gitlab只有linux版本&#xff0c;并不存在windows版本&a…