> For the complete documentation index, see [llms.txt](https://kdoore.gitbook.io/cs2335/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kdoore.gitbook.io/cs2335/project-2-dialog/dialogmanagerconvlist/dialogprefab-wimage.md).

# DialogPrefab wImage

This DialogPrefab\_wImg is optional - if you don't want to include a sprite for speaker image, then you can use the [DialogPrefab ](/cs2335/project-2-dialog/simple-dialog-prefab.md)from SimpleDialog sections.

To create a new DialogPrefab\_wImg, which includes an image, and uses the DialogManager.cs script component, which uses a ConversationList scriptable object. Follow steps detailed below:

{% embed url="<https://youtu.be/o82CtAbvM1M>" %}

## Create new version of DialogPrefab :DialogPrefab\_wImg&#x20;

#### To be used with DialogManager.cs  (which uses ScriptableObjects )

1. **Create a duplicate GameObject** in the hierarchy, this is created from your original [dialogPrefab](/cs2335/project-2-dialog/simple-dialog-prefab.md).<br>
2. Give the **new prefab a unique name:** **DialogPrefab\_wImg.**  <br>
3. **Remove the original DialogPrefab GameObject**  in the scene's hierarchy panel. (so you don't get confused)<br>
4. **Remove the SimpleDialog.cs** script component, this will be replaced by the DialogManager.cs script component once the script has been created.<br>
5. Use the **RectTransform tool to resize** the DialogPanel, DialogText, NextButton as necessary to make room for your speakerImage.

   ![](https://github.com/kdoore/cs2335_v2/tree/e629ce99d3c4e27e0dc9a8b416a206a1d7051d22/assets/Screen%20Shot%202019-03-12%20at%202.56.38%20PM.png)
6. Select the top-level, parent-panel, and **add a UI-Image as a child.**  The image below shows that the SpeakerImg is the bottom gameObject for the prefab, it is a sibbling to the other 2 Panels:  DialogPanel, SpeakerPanel. **Note that the SpeakerImg is the 5th child image which has index \[4]**, because all panels and buttons also have an image component.

   ![](https://github.com/kdoore/cs2335_v2/tree/e629ce99d3c4e27e0dc9a8b416a206a1d7051d22/assets/Screen%20Shot%202019-03-12%20at%202.58.19%20PM.png)
7. **Adjust the Rect-Transform Component** of this new image gameObject, to set the anchors so the Image is aligned to the left-side of the panel.  Either Middle or Bottom is fine.  The image below shows middle-left anchor set.(see image below)<br>
8. **Adjust the Image** (Script) component so that PreserveAspect checkbox is selected as true.<br>
9. **Select an Image from Assets** (Script) by selecting an image from your assets folder that is sized to match your speaker images, speaker images should have similar aspect ration and scaling.  Adjust the image as necessary, larger, smaller, etc.

![Add UI-Image, Rect-Transform Anchors: Center-Left-Align](https://3353821304-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M249mBvdLu6RMPffHvN%2F-M24AOAphf3PzDmarSy5%2FScreenshot%202020-03-10%2011.00.43.png?alt=media\&token=41909a3d-7e20-40bb-883a-f56d9030dd82)

<div align="center"><img src="https://3353821304-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M23Ixhzr_s_RtJrJ_hM%2F-M249Y43idslQV8Qz0s5%2FScreenshot%202020-03-10%2010.56.40.png?alt=media&amp;token=5953b058-e909-46ef-8e5c-184b4152c782" alt="Prefab With Speaker UI-Image"></div>

* **Create the DialogManager.cs** script [\[see link\]](/cs2335/project-2-dialog/dialogmanagerconvlist.md) and attach to the DialogPrefab\_wImg gameObject.
* **Drag to Resources folder** to create a new Prefab for this newly configured GameObject.
* Save Project and Scene ![](https://github.com/kdoore/cs2335_v2/tree/e629ce99d3c4e27e0dc9a8b416a206a1d7051d22/assets/Screen%20Shot%202019-03-11%20at%202.14.38%20PM.png)