룸 노드 그래프 편집기가 그리드 형식의 격자 무늬가 생기고 드래그해서 룸 노드 그래프 창을 움직이면서 더 다양하고 큰 룸 노드 그래프를 만들 수 있도록 스크립트를 구현해보자.
격자 무늬는 세로, 가로 줄무니를 추가해서 격자 무늬 역할을 할 수 있도록 한다.
private void OnGUI()
{
// If a scriptable object of type RoomNodeGraphSo has been selected then process
if (currentRoomNodeGraph != null)
{
// Draw Grid
DrawBackgroundGrid(gridSmall, 0.2f, Color.gray);
DrawBackgroundGrid(gridLarge, 0.3f, Color.gray);
// Draw line if being dragged
DrawDraggedLine();
// Process Events
ProcessEvents(Event.current);
// Draw Connections Between Room Nodes
DrawRoomConnections();
// Draw Room Nodes
DrawRoomNodes();
}
if (GUI.changed)
Repaint();
}
/// <summary>
/// Draw a background grid for the room node graph editor
/// </summary>
private void DrawBackgroundGrid(float gridSize, float gridOpacity, Color gridColor)
{
int verticalLineCount = Mathf.CeilToInt((position.width + gridSize) / gridSize);
int horizontalLineCount = Mathf.CeilToInt((position.height + gridSize) / gridSize);
Handles.color = new Color(gridColor.r, gridColor.g, gridColor.b, gridOpacity);
graphOffset += graphDrag * 0.5f;
Vector3 gridOffset = new Vector3(graphOffset.x % gridSize, graphOffset.y % gridSize, 0);
for (int i = 0; i < verticalLineCount; i++)
{
Handles.DrawLine(new Vector3(gridSize * i, -gridSize, 0) + gridOffset, new Vector3(gridSize * i, position.height + gridSize, 0f));
}
for (int j = 0; j < horizontalLineCount; j++)
{
Handles.DrawLine(new Vector3(-gridSize, gridSize * j, 0) + gridOffset, new Vector3(position.width + gridSize, gridSize * j, 0f));
}
Handles.color = Color.white;
}
기존의 드래그 이벤트 처리에 좌클릭 이벤트 처리 구문을 추가해서 노드 그래프를 이동 시킬 수 있도록 한다.
private Vector2 graphOffset;
private Vector2 graphDrag;
private void ProcessEvents(Event currentEvent)
{
// Reset graph drag
graphDrag = Vector2.zero;
// Get room node that mouse is over if it's null or not currently being dragged
if (currentRoomNode == null || currentRoomNode.isLeftClickDragging == false)
{
currentRoomNode = IsMouseOverRoomNode(currentEvent);
}
// if mouse isn't over a room node or we are currently dragging a line from the room node thyen process graph events
if (currentRoomNode == null || currentRoomNodeGraph.roomNodeToDrawLineFrom != null)
{
ProcessRoomNodeGraphEvents(currentEvent);
}
// else process room node events
else
{
// process room node events
currentRoomNode.ProcessEvents(currentEvent);
}
}
/// <summary>
/// Process mouse drag event
/// </summary>
private void ProcessMouseDragEvent(Event currentEvent)
{
// process right click drag event - draw line
if (currentEvent.button == 1)
{
ProcessRightMouseDragEvent(currentEvent);
}
// process left click drag event - drag node graph
else if (currentEvent.button == 0)
{
ProcessLeftMouseDragEvent(currentEvent.delta);
}
}
/// <summary>
/// Process left mouse drag event - drag room node graph
/// </summary>
private void ProcessLeftMouseDragEvent(Vector2 dragDelta)
{
graphDrag = dragDelta;
for (int i = 0; i < currentRoomNodeGraph.roomNodeList.Count; i++)
{
currentRoomNodeGraph.roomNodeList[i].DragNode(dragDelta);
}
GUI.changed = true;
}
다음과 같이 격자무늬가 생기고 드래그해서 룸 노드 그래프를 움직일 수 있다.
실제로 창보다 더 넓은 공간까지 룸 노드 그래프 제작이 가능하다.