Client and server in depth · Lesson 3/4 · 9 min
Interaction with qb-target
qb-target adds a crosshair to interact with zones, entities or models. It's the modern standard in QBCore.
Instead of checking distances by hand and pressing E, most QBCore servers use qb-target (or ox_target): you aim with the mouse and an interactive option appears. It's cleaner and performs better.
An interactive zone (box)
-- client.lua
exports['qb-target']:AddBoxZone('tienda_247', vector3(25.7, -1347.3, 29.5), 1.5, 1.5, {
name = 'tienda_247',
heading = 0,
debugPoly = false,
}, {
options = {
{
type = 'client',
event = 'tienda:client:abrir',
icon = 'fas fa-shopping-basket',
label = 'Open shop',
},
},
distance = 2.0,
})AddBoxZone
On a specific model (e.g. ATMs)
exports['qb-target']:AddTargetModel({ 'prop_atm_01', 'prop_atm_02', 'prop_atm_03' }, {
options = {
{ type = 'client', event = 'banco:client:abrirCajero', icon = 'fas fa-credit-card', label = 'Use ATM' },
},
distance = 1.5,
})AddTargetModel
type = 'client' fires a client event; there's also 'server' (fires a server event) and 'action' (a direct function). Even using target, logic with consequences is validated on the SERVER: the target is just the interface.
Practice what you learned
0/3¿Qué ventaja tiene qb-target frente a comprobar distancias a mano y pulsar E en un bucle?
Completa el export que crea una zona-caja interactiva con qb-target.
exports['qb-target']:('tienda_247', vector3(25.7, -1347.3, 29.5), 1.5, 1.5, { name = 'tienda_247', heading = 0,}, { options = { { type = 'client', event = 'tienda:client:abrir', icon = 'fas fa-shopping-basket', label = 'Abrir tienda' }, }, distance = 2.0,})Pista
Es la función que añade una zona rectangular: recibe nombre, coords, ancho, largo, datos de la caja y las opciones.
Ordena el export que añade una opción de qb-target sobre una entidad concreta (un NPC, vehículo, prop) ya spawneada.
Coloca las líneas en el orden correcto con las flechas.
exports['qb-target']:AddTargetEntity(entity, { distance = 2.0,}) { type = 'client', event = 'mecanico:client:menu', icon = 'fas fa-hand', label = 'Abrir' }, }, options = {Pista
Llamas a AddTargetEntity con la entidad, abres options, defines la opción (type, event, icon, label) y cierras con distance.
Challenge: code it yourself
Create a qb-target zone at some coordinates that, when interacted with, fires a client event 'mecanico:client:menu'.
Write it yourself in your editor (VS Code) and test it on your server. You learn here by doing it, not by copying.
See hint
AddBoxZone(name, coords, width, length, {...}, { options = { { type='client', event='mecanico:client:menu', label='Open workshop' } }, distance=2.0 }).
Escribe aquí tu solución: