> For the complete documentation index, see [llms.txt](https://dmitriy-vergasov.gitbook.io/character-interaction-system-extended-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dmitriy-vergasov.gitbook.io/character-interaction-system-extended-1/character-interaction-system/mechanics-examples/outlined-pickup-object.md).

# Outlined Pickup Object

<figure><img src="https://3496816267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2dSVQrBTULY7cYFC6ELP%2Fuploads%2Fif8kzeaTIOhimM6eYEP8%2Fbandicam%202023-11-05%2021-39-00-610.gif?alt=media&amp;token=d27d7fa5-86dc-4262-86f7-488ac5d15f77" alt=""><figcaption><p>Result</p></figcaption></figure>

<figure><img src="https://3496816267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2dSVQrBTULY7cYFC6ELP%2Fuploads%2FmuGRjQqsfmzQJ6cneqRy%2Fimage.png?alt=media&amp;token=9e367fd6-878d-492c-8afc-ba62a28a46e0" alt=""><figcaption></figcaption></figure>

As the foundation for the project, ALS is used. Additionally, it is necessary to choose any ready-made solution (or create your own) for outlining objects.&#x20;

I chose this plugin - <https://www.unrealengine.com/marketplace/en-US/product/snap-in-simple-mesh-outliner>&#x20;

First, let's create a 3D widget for our interactive objects. For the basis, I took the default widget from the plugin content of this plugin - **WBP\_InteractionPanel**&#x20;

Simply make a copy of it. Then, implement the logic as shown in the screenshot below.<br>

<figure><img src="https://3496816267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2dSVQrBTULY7cYFC6ELP%2Fuploads%2F6vewwedBQirfsbfmKoBx%2Fimage.png?alt=media&amp;token=74fa9ede-4298-4d3b-8a33-7cab89328467" alt=""><figcaption></figcaption></figure>

Here we simply cache the character interaction component, then in the tick we check if the current BestObjectToUse is equal to this object (which we get through the widget's outer), then the widget changes color, and also the progress bar is filled based on the value of DelayedObjectProgress.&#x20;

Next, create a base actor for the interactive object - **BP\_PickableActor**.&#x20;

Add to it the **CISInteractionObject** component, as well as the **CISWidget** component - this is the same type of widget component as the default one, but with one difference - the outer of the created widget is assigned to the owner of this component, i.e., the **BP\_PickableActor** itself.

<div align="left"><figure><img src="https://3496816267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2dSVQrBTULY7cYFC6ELP%2Fuploads%2FXWOjchlV8zn2QGwYfrdE%2Fimage.png?alt=media&amp;token=9d1d6cd5-e08f-47b6-adef-ecc6f6eedc42" alt=""><figcaption></figcaption></figure></div>

Also, you will need to create a new **CISInteractionObjectAction** + another **CISInteractionDataObject** to handle the outline change. You can name them **BP\_PickupAction** and **BP\_PickableDataObject**, respectively.

The CISInteractionObject settings are as follows:

<figure><img src="https://3496816267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2dSVQrBTULY7cYFC6ELP%2Fuploads%2F044TbHaR2II2qV7qphzj%2Fimage.png?alt=media&amp;token=cc726a8e-cfea-4715-9193-563f71815c48" alt=""><figcaption></figcaption></figure>

I simply added one InteractionSide with a 360-degree radius, assigned to it the previously created **PickupAction**, as well as designated the **DataObjectClass**.

Настройки CISWidgetComponent\
![](https://3496816267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2dSVQrBTULY7cYFC6ELP%2Fuploads%2Fc9c8NFBjXNjR7w3HZ1zz%2Fimage.png?alt=media\&token=e28230b8-5201-4041-8bc3-8bbb4c1ebd1a)

The logic in **BP\_PickupAction** consists of the following sequence:<br>

<figure><img src="https://3496816267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2dSVQrBTULY7cYFC6ELP%2Fuploads%2FaLTrH82OLhCp43IS3qBW%2Fimage.png?alt=media&amp;token=02d6b773-8ca3-47fb-a986-651a254f9f0d" alt=""><figcaption></figcaption></figure>

Here we simply change the animation state in the ALS character, complete the action, and destroy the interactive object actor.

And the final part - let's take a look at the **BP\_PickableDataObject** settings.

<figure><img src="https://3496816267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2dSVQrBTULY7cYFC6ELP%2Fuploads%2Flz10YQKKK8mcAP0nQFSM%2Fimage.png?alt=media&amp;token=3a501eea-730a-4ee7-a3f2-76dd0b95184a" alt=""><figcaption></figcaption></figure>

Upon initialization, we subscribe to changes in the current BestObjectForUse - this is necessary so that the outline works only on the potential object for interaction and is turned off for all others.&#x20;

Then in the UpdateOutline function, provided that the current object for use is equal to BestObjectForUse, we enable or disable the outline effect.&#x20;

Also, when changing the Usable state of the object, we turn the CISWidget component on or off.&#x20;

Thus, you can create basic objects for interactions for your game.
