【Godot4自学手册】第四十二节实现拖拽进行物品交换和数量叠加

news2024/11/18 12:20:57

这一节我们主要学习背包系统中的物品拖拽后,物品放到新的位置,或交换物品位置,如果两个物品属于同一物品则数量相加。具体效果如下:
请添加图片描述

一、修改item.tscn场景

给item.tscn场景的根节点Item添加Label子节点,命名为NumverCount,用于显示物品数量。然后修改根节点的代码如下:

extends Node2D
@export var number=1  #表示物品的数量
@export var icoUrl="" #表示物品图片
@export var itemname=""  #表示物品的名称


@onready var texture_rect = $TextureRect
@onready var numver_count = $NumverCount

func _ready(): #随机载入2张物品图片
	if randi()%2==0:#产生个随机数,用2除,余数为0
		itemname="宝剑"
		icoUrl = "res://Sprites/Inventory/Iron Sword.png"		
	else:#产生个随机数,用2除,余数不为0
		itemname="树枝"
		icoUrl = "res://Sprites/Inventory/Tree Branch.png"
		
	setIco(icoUrl)
	setNumber(number)
#设置显示数量
func setNumber(numvercount):
	number = numvercount
	numver_count.text=str(numvercount)
#设置图片
func setIco(icoUrlstr):
	texture_rect.texture=load(icoUrlstr)

改代码主要增加了三个属性,一个是物品数量,一个是物品的图片地址,最后一个是物品的名称。增加了2个方法,一个是setNumber方法用于显示物品数量;另一个是setIco函数设置物品图片。

二、修改slot.gd代码。

slot.gd代码修改如下:

extends Panel

#背包背景格子图片,default_text有物品的时候背景格子;empty_text无物品的时候背景格子
var default_text = preload("res://Sprites/Inventory/item_slot_default_background.png")
var empty_text = preload("res://Sprites/Inventory/item_slot_empty_background.png")

var default_style:StyleBoxTexture =null #有物品的时候格子样式
var empty_style:StyleBoxTexture =null  #五物品的时候格子样式


var itemClass = preload("res://Scenes/item.tscn")  #预加载物品
var item =null  #定义物品


func _ready():
	default_style = StyleBoxTexture.new()  #初始化有物品时候的格子样式
	empty_style = StyleBoxTexture.new()  #初始化无物品时候的格子样式
	default_style.texture = default_text  #将有物品时的格子与样式联系起来
	empty_style.texture = empty_text  #将无物品时的格子与样式联系起来
	
	if randi()%2==0:  #产生一个随机数,用2求余  当余数为0时
		item = itemClass.instantiate()  #实例化物品
		add_child(item)  #在插槽内加载物品
	refresh_style()  #刷新样式函数
		
func refresh_style():  #刷新样式函数
	if item==null: #物品为空时,对应设置样式
		set("theme_override_styles/panel",empty_style)
	else:#物品不为空时,对应设置样式
		set("theme_override_styles/panel",default_style)

func getitem(): #返回节点
	return item
	
func removeNode(): #移出节点
	if item!=null:
		remove_child(item)
		item=null
		set("theme_override_styles/panel",empty_style)	

func PutIntoSlot(textureFrom):#物品拖放功能
	if item==null:#如果目标物品栏为空
		item = itemClass.instantiate()  #实例化物品	
		add_child(item)
		item.texture_rect.texture = textureFrom.item.texture_rect.texture
		item.setNumber(textureFrom.item.number)
		textureFrom.removeNode()
	else:#如果目标物品栏不为空,则物品进行交换		
		if item.texture_rect.texture==textureFrom.item.texture_rect.texture:
			#如果目标物品跟拖放物品数同一商品,则数量相加
			item.setNumber(item.number+textureFrom.item.number)
			textureFrom.removeNode()
			pass
		else:#如果目标物品跟拖放物品不同,则交换
			var tempItem =  item.texture_rect.texture
			var tempnumber =  item.number
			item.texture_rect.texture = textureFrom.item.texture_rect.texture
			item.setNumber(textureFrom.item.number)
			textureFrom.item.texture_rect.texture = tempItem
			textureFrom.item.setNumber(tempnumber)

三、修改一下Inventory场景

在根节点下添加一个Control控件,在该节点上单击右键选择设为场景根节点,这样该场景就变成了Control为根节点了,然后将原来根节点下的子节点拉入到Control节点下,最后删除原来的Node2d节点,并把Control节点命名为Inventory。
最后目录结构如下:
请添加图片描述

修改根节点代码如下:

extends Control
@onready var grid_container = $GridContainer


#拖拽开始
func _get_drag_data(at_position):
	var dragSlotNode = get_slot_node_at_position(at_position)  #获取哪个节点被拖放
	if dragSlotNode.getitem()==null : return  #如果未有物品直接退出
	#复制物品节点下的图片作为拖动预览节点
	var dragPreviewNode = dragSlotNode.getitem().get_child(0).duplicate()
	dragPreviewNode.custom_minimum_size=Vector2(16,16)  #设置最小值为16像素
	set_drag_preview(dragPreviewNode)  # 函数用于设置当节点被拖动时显示的预览图像。
	return dragSlotNode
	
#用于确定一个控件是否能够接受拖放操作中放置的数据。这个函数在控件接收到拖放数据时被调用,允许您根据数据的类型或来源决定是否接受数据。
func _can_drop_data(at_position, data):
	var targetSlotNode = get_slot_node_at_position(at_position)	
	return targetSlotNode !=null

#用于处理拖放操作中数据被放置到控件上时的逻辑。当用户将数据拖放到控件上,并且 can_drop_data() 返回 true 时,_drop_data() 函数会被调用。
#at_position表示接收拖放的坐标数据,dragSloteNode表示从哪个节点拖放过来
func _drop_data(at_position, dragSloteNode):
	var targetSlotNode = get_slot_node_at_position(at_position) #获取接收拖放的节点
	targetSlotNode.PutIntoSlot(dragSloteNode)

这样我们就实现物品拖拽功能,下节见。

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

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

相关文章

【计算机视觉】人脸算法之图像处理基础知识(六)

图像直方图 图像直方图是描述图像中像素强度分布的一种统计图表,它是图像处理和计算机视觉领域中一个非常基础且重要的概念。图像直方图通常用于分析图像的亮度、对比度特性,以及在图像增强、阈值分割、特征提取等多种图像处理任务。 import cv2 impor…

HTTPS 代理的优点和缺点是什么?

HTTPS(超文本安全传输协议)作为一种基于HTTP加上SSL安全层的网络通信协议,已经成为互联网上广泛使用的IP协议之一。它在保证信息安全和隐私方面具有很多优势,但也存在一些缺点。接下来,我们就来探究一下HTTPS协议的优缺…

日牵物流装备受邀盛装亮相2024长三角快递物流供应链与技术装备展览会(杭州)

日牵物流装备受邀盛装亮相2024长三角快递物流供应链与技术装备展览会,为物流节省每一个铜板,3C馆A21与您相约! 日牵物流装备始建于1995年,总部坐落于辽宁省大连市,是一家集科研开发、生产制造、销售服务于一体的现代化…

HTML5【新特性总结】

HTML5【新特性总结】 HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题,基本是 IE9 以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。…

Bootstrap和Bagging算法以及衍生算法

1. Bootstrap算法 实际上就是一种针对小样本的无放回式的抽样方法,通过方差的估计可以构造置信区间。 其核心思想和基本步骤如下:   (1) 采用重抽样技术从原始样本中抽取一定数量(自己给定)的样本&#…

今日分享:中国石油年金系统交互、视觉设计和vue开发

金融系统交互及UI设计时,需注意简洁明了、色彩合理、字体统一、交互易用、安全感和用户控制。确保用户快速理解、安全操作并提升体验。

vue elementui 封装图片、视频集合组件 组件的基本应用

用红线框起来的地方理论上用的是同一套代码 那么就可以封装成组件 //父级页面的调用 <div class"title">活动缘起</div> <div class"grid-content bg-gray-light">...<pv-box v-if"form && form.originMaterials &…

汇聚荣电商实力好不好?

在数字化浪潮的推动下&#xff0c;电商平台如雨后春笋般涌现&#xff0c;而“汇聚荣”作为其中的一员&#xff0c;其综合实力自然成为业界与消费者关注的焦点。那么&#xff0c;汇聚荣电商的实力究竟如何呢?接下来&#xff0c;我们将从多个维度深入探讨这一问题。 一、品牌影响…

win10 修改远程桌面端口,在Win10上修改远程桌面端口的要怎么操作

在Windows 10上修改远程桌面端口是一个涉及系统配置的过程&#xff0c;这通常是为了增强安全性或满足特定网络环境的需要。 一、通过注册表编辑器修改远程桌面端口 1. 打开注册表编辑器&#xff1a; - 按下Win R组合键&#xff0c;打开“运行”对话框。 - 在“运行”对话框…

科技赋能冷链园区:可视化带来全新体验

应用图扑可视化技术&#xff0c;冷链园区能够更加直观地监控和管理资源&#xff0c;优化运作流程&#xff0c;提高运营效率与服务质量。

大型语言模型(LLM)和多模态大型语言模型(MLLM)的越狱攻击

随着大型语言模型&#xff08;LLMs&#xff09;的快速发展&#xff0c;它们在各种任务上表现出了卓越的性能&#xff0c;有效地遵循指令以满足多样化的用户需求。然而&#xff0c;随着这些模型遵循指令的能力不断提升&#xff0c;它们也越来越成为对抗性攻击的目标&#xff0c;…

狂神说Java之 rabbitmq高级分布式事务

分布式事务的完整架构图 案例场景分析 案例一&#xff1a;用RestTemplate演示&#xff08;不可靠生产&#xff0c;会出现问题&#xff09; 创建一个订单模块 创建一个OrderDataBaseService服务 创建一个order的service服务&#xff0c;调用saveOrder()方法 创建一个运单模块…

鸿蒙开发下拉选项框在表单递交的处理

下拉选项框 <select name"identity"><option value"0">顾 客</option><option value"1">行 政</option><option value"2" >保 洁</option></select>在表单数据中没有找到identit…

JavaScript引用类型Array实例分析

}, toString: function() { return “Bruce”; }//前端全栈开发交流圈&#xff1a;866109386 }//帮助1-3年前端人员&#xff0c;突破技术瓶颈&#xff0c;提升思维能力 var person2 { toLocaleString: function() { return “Cindy”; }, toString: function() { return “Dav…

React的生命周期函数详解

import React,{Component} from "react";import SonApp from ./sonAppclass App extends Component{state{hobby:爱吃很多好吃的}// 是否要更新数据&#xff0c;这里返回true才会更新数据shouldComponentUpdate(nextProps,nextState){console.log("app.js第一步…

算法06 贪心算法【C++实现】

我们可以扮演一个贪心的人&#xff0c;在金子、银、铁中选择装入背包带走的话&#xff0c;作为一个贪心的人&#xff0c;肯定要把价值最大化&#xff0c;优先要选择装载价值较高的金子。 目录 什么是贪心算法 证明方法 常见题型 常见题型解法 训练&#xff1a;小木船过河 …

富士施乐M268DW加粉清零方法

基本参数&#xff1a; 品牌型号&#xff1a;富士施乐(Fuji Xerox) M268DW 产品类型&#xff1a;A4黑白激光多功能一体机&#xff08;三合一&#xff09;&#xff0c;打印、复印、扫描 打印情况&#xff1a;30张/分&#xff0c;1200dpi最大分辨率&#xff0c;64M内存 最大月…

Tomcat多实例配置

目录 一. 复制程序文件 二. 启动tomcat多实例 三. Tomcat多实例负载均衡 多实例&#xff08;多进程&#xff09;&#xff1a;同一个程序启动多次&#xff0c;分为两种情况: 第一种&#xff1a;一台机器跑多个站点&#xff1b; 第二种&#xff1a;一个机器跑一个站点多个实…

JeecgFlow并行网关概念及案例演示

概念讲解 并行网关能够在一个流程中用于进行并发建模处理&#xff0c;将单条线路拆分成多条路径并行执行&#xff0c;或者将多条路径合并处理。 在一个流程模型中引入并发最直接的网关就是并行网关&#xff0c;它基于进入和外出顺序流&#xff0c;有分支和合并两种行为&#xf…

存储无界限:MK米客方德SD NAND系列,小容量到大容量的全方位覆盖

在这个数字化飞速前进的时代&#xff0c;数据存储的需求日益增长&#xff0c;不同的应用场景对存储容量的要求也各不相同。MK米客方德公司以其SD NAND系列产品&#xff0c;凭借其广泛的容量覆盖&#xff0c;从1Gb到512Gb&#xff0c;为各种应用场景提供了完美的存储解决方案。今…