> ## Documentation Index
> Fetch the complete documentation index at: https://docs.diversion.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# UE Plugin - Solving Merge Conflicts With Diversion

export const Image = ({src, alt}) => <img src={src} alt={alt} style={{
  width: '90%',
  borderRadius: '1.5rem',
  border: '.3rem solid #555',
  boxShadow: '0 0 1rem #888'
}} />;

When working with a team on a project, it is common to run into merge conflicts. This can happen when two or more people make changes to the same file and try to merge their changes together.
Diversion's `merge warnings` help avoid conflicts, but if you run into one anyway, this guide will help you resolve it using our Unreal Engine Plugin.

## Step 1: Create a Merge Conflict

To create a merge conflict, you will need to make changes to the same file in two different branches.

Here I have `BP_ThirdPersonCharacter` from Unreal's Third Person Template project, which I have initialized as a Diversion repository using the plugin.

<img alt="TPS Character - clean" style={{width: '90%', borderRadius: '1.5rem', border: '.3rem solid #555', boxShadow: '0 0 1rem #888' }} src="https://mintcdn.com/diversion-2/tgHOXPild1lTdU_m/images/bp_tps_character_clean.png?fit=max&auto=format&n=tgHOXPild1lTdU_m&q=85&s=64139a10bc6e64ca2425e28dc1809298" width="2558" height="1440" data-path="images/bp_tps_character_clean.png" />

In the Diversion desktop app, I'll create a new branch and call it `notify-jump-apex`.

<img alt="Creating new branch - where the button is" style={{width: '90%', borderRadius: '1.5rem', border: '.3rem solid #555', boxShadow: '0 0 1rem #888' }} src="https://mintcdn.com/diversion-2/kHkON9nxKTMPAEAM/images/creating-new-branch-showing-the-button.png?fit=max&auto=format&n=kHkON9nxKTMPAEAM&q=85&s=658fd86168d3ec51dadb6b693ae33e25" width="762" height="1140" data-path="images/creating-new-branch-showing-the-button.png" />

<img alt="Creating new branch - actually creating" style={{width: '90%', borderRadius: '1.5rem', border: '.3rem solid #555', boxShadow: '0 0 1rem #888' }} src="https://mintcdn.com/diversion-2/tgHOXPild1lTdU_m/images/creating-new-branch-actually-creating.png?fit=max&auto=format&n=tgHOXPild1lTdU_m&q=85&s=34871a6f5fe747ff9ba00f59687ce788" width="602" height="361" data-path="images/creating-new-branch-actually-creating.png" />

Let's have our character fire an event when it reaches the apex of a jump. We have to set it in the `BP_ThirdPersonCharacter` blueprint like this:

(Yes, this is just a simplified example for the purpose of this guide.)

<img alt="Notifying jump apex" style={{width: '90%', borderRadius: '1.5rem', border: '.3rem solid #555', boxShadow: '0 0 1rem #888' }} src="https://mintcdn.com/diversion-2/HhHa-PhS49hu7GIa/images/set-notify-jump-apex.png?fit=max&auto=format&n=HhHa-PhS49hu7GIa&q=85&s=538f7b36f3dad08f54c1e61dabcd6737" width="965" height="523" data-path="images/set-notify-jump-apex.png" />

Great! Let's commit our changes to the `notify-jump-apex` branch.

<img alt="Committing notifying jump apex" style={{width: '90%', borderRadius: '1.5rem', border: '.3rem solid #555', boxShadow: '0 0 1rem #888' }} src="https://mintcdn.com/diversion-2/tgHOXPild1lTdU_m/images/commit-notify-jump-apex.png?fit=max&auto=format&n=tgHOXPild1lTdU_m&q=85&s=8130bb43b8426518e4fc6e1f154df2b5" width="619" height="457" data-path="images/commit-notify-jump-apex.png" />

Another "feature" we want is to have the character attack. We'll switch back to the `main` branch, create a new branch called `attack` like before, and restart the editor to get the correct version of our blueprint.

Let's implement our attack logic, and commit it to the `attack` branch.

<img alt="Stub for attack logic" style={{width: '90%', borderRadius: '1.5rem', border: '.3rem solid #555', boxShadow: '0 0 1rem #888' }} src="https://mintcdn.com/diversion-2/HhHa-PhS49hu7GIa/images/stub-for-attack-logic.png?fit=max&auto=format&n=HhHa-PhS49hu7GIa&q=85&s=f92085b0446d50ad2bcb0251aabd0a77" width="761" height="642" data-path="images/stub-for-attack-logic.png" />

Now, let's merge! Close the editor, switch back to the `main` branch, and merge the `notify-jump-apex` branch into it.

<img alt="Switching back to the main branch" style={{width: '90%', borderRadius: '1.5rem', border: '.3rem solid #555', boxShadow: '0 0 1rem #888' }} src="https://mintcdn.com/diversion-2/HhHa-PhS49hu7GIa/images/switch-back-to-main.png?fit=max&auto=format&n=HhHa-PhS49hu7GIa&q=85&s=d0cf97109424d2fe9cfbeb3e4c088452" width="510" height="278" data-path="images/switch-back-to-main.png" />

<img alt="Merging notify-jump-apex to main" style={{width: '90%', borderRadius: '1.5rem', border: '.3rem solid #555', boxShadow: '0 0 1rem #888' }} src="https://mintcdn.com/diversion-2/tNxAwm8NrThaCp35/images/merge-notify-jump-to-main.png?fit=max&auto=format&n=tNxAwm8NrThaCp35&q=85&s=230d755e6989e5999f1106bd944ff6a5" width="551" height="367" data-path="images/merge-notify-jump-to-main.png" />

That went smoothly since there were no conflicting changes. That won't be the case when we merge the `attack` branch into the `main` branch:

<img alt="Conflicts detected" style={{width: '90%', borderRadius: '1.5rem', border: '.3rem solid #555', boxShadow: '0 0 1rem #888' }} src="https://mintcdn.com/diversion-2/tgHOXPild1lTdU_m/images/conflicts-detected-in-merge.png?fit=max&auto=format&n=tgHOXPild1lTdU_m&q=85&s=d98e19d447638d8c2246b9d70a4a1ac7" width="371" height="77" data-path="images/conflicts-detected-in-merge.png" />

Whoopsie! We have a merge conflict. Since this is a binary file, a `.uasset`, it's not human-readable and we can't resolve it manually just like that, without any special tools. Luckily for us, Unreal has a special tool! Let's use it.

## Step 2: Resolve the Merge Conflict

Open the Unreal editor and open our `BP_ThirdPersonCharacter` blueprint. Notice the icon? It tells us there's a conflict in the file.

<img alt="Conflict in the blueprint" style={{width: '90%', borderRadius: '1.5rem', border: '.3rem solid #555', boxShadow: '0 0 1rem #888' }} src="https://mintcdn.com/diversion-2/tgHOXPild1lTdU_m/images/conflict-in-bp-tps-character.png?fit=max&auto=format&n=tgHOXPild1lTdU_m&q=85&s=ea06b749871cab581e66846b3086d47b" width="543" height="510" data-path="images/conflict-in-bp-tps-character.png" />

Right-click on the file and go to `Revision Control -> Merge`. This will open the merge resolution tool.

<img alt="Revision control - merge" style={{width: '90%', borderRadius: '1.5rem', border: '.3rem solid #555', boxShadow: '0 0 1rem #888' }} src="https://mintcdn.com/diversion-2/zdFp0wmCrPve5JMp/images/revision-control-merge.png?fit=max&auto=format&n=zdFp0wmCrPve5JMp&q=85&s=8341eea0a02e6c590aa9ed66a1c57a5b" width="581" height="283" data-path="images/revision-control-merge.png" />

<img alt="Merge window" style={{width: '90%', borderRadius: '1.5rem', border: '.3rem solid #555', boxShadow: '0 0 1rem #888' }} src="https://mintcdn.com/diversion-2/tNxAwm8NrThaCp35/images/merge-tool-empty-window.png?fit=max&auto=format&n=tNxAwm8NrThaCp35&q=85&s=4c89dc2f4f0b019af6bc4b912836729f" width="2554" height="1440" data-path="images/merge-tool-empty-window.png" />

The three columns represent the remote, local, and base versions of the file. The remote version is on the left, and it's the incoming change.
In our case, that's the change from the `attack` branch. Notice in the screenshot above the left column says `Revision 12`?
Your left column might have a different number, since I messed up when taking the screenshots for this guide and had to do it again. I think yours should say `4`. Let us know in the Discord!

The middle column is the local version, which is what you have in your current branch. In our example this is the current state of the `main` branch and should include the changes from the `notify-jump-apex` branch.
It's important to have the middle column show your local changes, as it will help us manage the merge conflict better. This seems to be an issue with Unreal's merge tool.

The right colum is the base version, which is the common ancestor of the two branches, and is optional. In our case, it's the second commit from the `main` branch, with the original blueprint from the template.
To see the base version, open the drop down and select the correct commit to see in that column. If you mouse-over the commit, you'll see the commit message so you can identify the correct one. You can also leave it as it is and the rest of the process should look the same.

<img alt="Base commit for merge" style={{width: '90%', borderRadius: '1.5rem', border: '.3rem solid #555', boxShadow: '0 0 1rem #888' }} src="https://mintcdn.com/diversion-2/tgHOXPild1lTdU_m/images/base-branch-for-merge.png?fit=max&auto=format&n=tgHOXPild1lTdU_m&q=85&s=06f3dd54405cd6a1e2cba197472201c4" width="295" height="279" data-path="images/base-branch-for-merge.png" />

Click on `Start Merge` and then on `Event Graph`. You can navigate your changes using the graphs as you normally would, or using the `Next` and `Previous` buttons.
Notice that our blueprint opened in the background, and any changes we make to it will be reflected in the middle column.

At the top, we have 3 important buttons: `Accept Source`, `Accept Target`, and `Finish Merge`. `Accept Source` will take the changes from the left column, `Accept Target` will take the changes from the middle column, and `Finish Merge` will save the changes and close the window.
In our case, neither is what we want! We want to combine the changes from both branches. To do that, we'll have to manually copy the changes from the left column to our blueprint that's open in the background.
So just copy-paste as you normally would, and when you're done, click `Finish Merge`.

Before:

<img alt="Merge window - before" style={{width: '90%', borderRadius: '1.5rem', border: '.3rem solid #555', boxShadow: '0 0 1rem #888' }} src="https://mintcdn.com/diversion-2/HhHa-PhS49hu7GIa/images/unreal-blueprint-merge-window.png?fit=max&auto=format&n=HhHa-PhS49hu7GIa&q=85&s=f5b8f7ccff0b0520cfbbcb32a51bcc41" width="2556" height="1440" data-path="images/unreal-blueprint-merge-window.png" />

After:

<img alt="Merge window - after" style={{width: '90%', borderRadius: '1.5rem', border: '.3rem solid #555', boxShadow: '0 0 1rem #888' }} src="https://mintcdn.com/diversion-2/tNxAwm8NrThaCp35/images/mid-way-three-way-merge.png?fit=max&auto=format&n=tNxAwm8NrThaCp35&q=85&s=035598e09370c0c7c8eba23f9f67e829" width="2561" height="1440" data-path="images/mid-way-three-way-merge.png" />

And that's it! You've resolved the merge conflict using Unreal's merge tool. Recompile your blueprint and you're good to go.
