Merge pull request #371 from BenjaminNavarro/master

Add dynamic split screen demo

Author: aaronfranke

viewport/dynamic_split_screen/CameraController.gd

@@ -0,0 +1,107 @@
+extends Spatial
+
+# Handle the motion of both players' camera as well as communication with the
+# SplitScreen shader to achieve the dynamic split screen effet
+# 
+# Cameras are place on the segment joining the two players, either in the middle 
+# if players are close enough or at a fixed distance if they are not.
+# In the first case, both cameras being at the same location, only the view of 
+# the first one is used for the entire screen thus allowing the players to play 
+# on a unsplit screen.
+# In the second case, the screen is split in two with a line perpendicular to the
+# segement joining the two players.
+# 
+# The points of customization are:
+#   max_separation: the distance between players at which the view starts to split
+#   split_line_thickness: the thickness of the split line in pixels
+#   split_line_color: color of the split line
+#   adaptive_split_line_thickness: if true, the split line thickness will vary 
+#       depending on the distance between players. If false, the thickness will
+#       be constant and equal to split_line_thickness
+
+export(float) var max_separation = 20.0
+export(float) var split_line_thickness = 3.0
+export(Color, RGBA) var split_line_color = Color.black
+export(bool) var adaptive_split_line_thickness = true
+
+onready var player1 = $'../Player1'
+onready var player2 = $'../Player2'
+onready var camera1: Camera = $'Viewport1/Camera1'
+onready var camera2: Camera = $'Viewport2/Camera2'
+onready var view: TextureRect = $'View'
+
+
+func _ready():
+	_on_size_changed()
+	_update_splitscreen()
+	
+	get_viewport().connect("size_changed", self, "_on_size_changed")
+	
+	view.material.set_shader_param('viewport1', $Viewport1.get_texture())
+	view.material.set_shader_param('viewport2', $Viewport2.get_texture())
+
+
+func _process(_delta):
+	_move_cameras()
+	_update_splitscreen()
+
+
+func _move_cameras():
+	var position_difference = _compute_position_difference_in_world()
+	
+	var distance = clamp(_compute_horizontal_length(position_difference), 0, max_separation)
+
+	position_difference = position_difference.normalized() * distance
+
+	camera1.translation.x = player1.translation.x + position_difference.x / 2.0
+	camera1.translation.z = player1.translation.z + position_difference.z / 2.0
+
+	camera2.translation.x = player2.translation.x - position_difference.x / 2.0
+	camera2.translation.z = player2.translation.z - position_difference.z / 2.0
+
+
+func _update_splitscreen():
+	var screen_size = get_viewport().get_visible_rect().size
+	var player1_position = camera1.unproject_position(player1.translation) / screen_size
+	var player2_position = camera2.unproject_position(player2.translation) / screen_size
+	
+	var thickness
+	if adaptive_split_line_thickness:
+		var position_difference = _compute_position_difference_in_world()
+		var distance = _compute_horizontal_length(position_difference)
+		thickness = lerp(0, split_line_thickness, (distance - max_separation) / max_separation)
+		thickness = clamp(thickness, 0, split_line_thickness)
+	else:
+		thickness = split_line_thickness
+	
+	view.material.set_shader_param('split_active', _get_split_state())
+	view.material.set_shader_param('player1_position', player1_position)
+	view.material.set_shader_param('player2_position', player2_position)
+	view.material.set_shader_param('split_line_thickness', thickness)
+	view.material.set_shader_param('split_line_color', split_line_color)
+
+
+# Split screen is active if players are too far apart from each other.
+# Only the horizontal components (x, z) are used for distance computation
+func _get_split_state():
+	var position_difference = _compute_position_difference_in_world()
+	var separation_distance = _compute_horizontal_length(position_difference)
+	return separation_distance > max_separation
+
+
+func _on_size_changed():
+	var screen_size = get_viewport().get_visible_rect().size
+	
+	$Viewport1.size = screen_size
+	$Viewport2.size = screen_size
+	view.rect_size = screen_size
+	
+	view.material.set_shader_param('viewport_size', screen_size)
+
+
+func _compute_position_difference_in_world():
+	return player2.translation - player1.translation
+
+
+func _compute_horizontal_length(vec):
+	return Vector2(vec.x, vec.z).length()

viewport/dynamic_split_screen/PlayerMovement.gd

@@ -0,0 +1,16 @@
+extends KinematicBody
+
+# Moves the player
+
+export(int, 1, 2) var player_id = 1
+export(float) var walk_speed = 20.0
+
+
+func _physics_process(_delta):
+	var velocity = Vector3.ZERO
+	velocity.z = -Input.get_action_strength("move_up_player" + str(player_id))
+	velocity.z += Input.get_action_strength("move_down_player" + str(player_id))
+	velocity.x = -Input.get_action_strength("move_left_player" + str(player_id))
+	velocity.x +=  Input.get_action_strength("move_right_player" + str(player_id))
+	
+	move_and_slide(velocity.normalized() * walk_speed)

viewport/dynamic_split_screen/README.md

@@ -0,0 +1,24 @@
+# The project
+This sample project showcases an implementation of dynamic split screen, also called Voronoi split screen, using the [Godot engine](https://godotengine.org).
+
+# Dynamic split screen
+A dynamic split screen system displays a single screen when the two players are close but a splitted view when they move apart.
+
+The splitting line can take any angle depending on the players' position, so it won't be either vertical or horizontal.
+
+This system was popularized by the Lego videogames.
+
+# How it works
+Two cameras are placed inside two separate viewports and their texture, as well as some other parameters, are passed to a shader attached to a TextureRect filling the whole screen.
+
+The `SplitScreen` shader, with the help of the `CameraController` script, chooses wich texture to display on each pixel to achieve the effect.
+
+The cameras are placed on the segment joining the two players, either in the middle if they're close enough or at a fixed distance otherwise. 
+
+# How to use it
+Open and launch the project inside the Godot engine and then you can use WASD keys to move the first player and IJKL keys to move the second one.
+
+The `Cameras` node has parameters to tune the distance at which the screen splits and also the width and color of the splitting line.
+
+# Try it out
+An HTML5 export is testable [here](https://benjaminnavarro.github.io/godot_dynamic_split_screen/index.html).

viewport/dynamic_split_screen/SplitScreen.shader

@@ -0,0 +1,74 @@
+shader_type canvas_item;
+render_mode unshaded;
+
+uniform vec2 viewport_size;         // size in pixels of the viewport. Cannot be access from the shader in GLES2
+uniform sampler2D viewport1 : hint_albedo;
+uniform sampler2D viewport2 : hint_albedo;
+uniform bool split_active;          // true: split screen, false: use view1
+uniform vec2 player1_position;      // position of player 1 un UV coordinates
+uniform vec2 player2_position;      // position of player 2 un UV coordinates
+uniform float split_line_thickness; // width of the split boder
+uniform vec4 split_line_color;      // color of the split border
+
+
+// from https://stackoverflow.com/questions/15276454/is-it-possible-to-draw-line-thickness-in-a-fragment-shader
+float distanceToLine(vec2 p1, vec2 p2, vec2 point) {
+	float a = p1.y - p2.y;
+	float b = p2.x - p1.x;
+	return abs(a * point.x + b * point.y + p1.x * p2.y - p2.x * p1.y) / sqrt(a * a + b * b);
+}
+
+void fragment() {
+	vec3 view1 = texture(viewport1, UV).rgb;
+	vec3 view2 = texture(viewport2, UV).rgb;
+
+	float width = viewport_size.x;
+	float height = viewport_size.y;
+	
+	if (split_active) {
+		vec2 dx = player2_position - player1_position;
+		float split_slope;
+		
+		if (dx.y != 0.0) {
+			split_slope = dx.x / dx.y;
+		}
+		else {
+			split_slope = 100000.0; // High value (vertical split) if dx.y = 0
+		}
+		
+		vec2 split_origin = vec2(0.5, 0.5);
+		vec2 split_line_start = vec2(0.0, height * ((split_origin.x - 0.0) * split_slope + split_origin.y));
+		vec2 split_line_end = vec2(width, height * ((split_origin.x - 1.0) * split_slope + split_origin.y));
+		float distance_to_split_line = distanceToLine(split_line_start, split_line_end, vec2(UV.x * width, UV.y * height));
+		
+		// Draw split border if close enough
+		if (distance_to_split_line < split_line_thickness) {
+			COLOR = split_line_color;
+		}
+		else {
+			float split_current_y = (split_origin.x - UV.x) * split_slope + split_origin.y;
+			float split_player1_position_y = (split_origin.x - player1_position.x) * split_slope + split_origin.y;
+
+			// Check on which side of the split UV is and select the proper view
+			if (UV.y > split_current_y) {
+				if (player1_position.y > split_player1_position_y) {
+					COLOR = vec4(view1, 1.0);
+				}
+				else {
+					COLOR = vec4(view2, 1.0);
+				}
+			}
+			else {
+				if (player1_position.y < split_player1_position_y) {
+					COLOR = vec4(view1, 1.0);
+				}
+				else {
+					COLOR = vec4(view2, 1.0);
+				}
+			}
+		}
+	}
+	else {
+		COLOR = vec4(view1, 1.0);
+	}
+}