Draw Grid only over Canvas. Added PixelGrid. (#427)

* Draw grid only over the Canvas (when in tiling mode)

* Replace some magic numbers with enums.

It's too easy to break something when adding something new in here. Should be a little harder now.

* Added Pixel Grid.

- Pixel grid is shown only when it's enabled and camera is zoomed close enough.
- Settings: pixel_grid_show_at_zoom (as a percentage because that's what's shown in the settings panel), pixel_grid_color. Default values might need changing.
- To distinguish between grid and pixel grid default settings for grid width, grid height are changed.
- Now both grid and pixel grid are drawn above (after) tile mode. Grid is drawn above (after) pixel grid.

Translations/Translations.pot

@@ -148,6 +148,9 @@ msgstr ""
 msgid "Show Grid"
 msgstr ""
 
+msgid "Show Pixel Grid"
+msgstr ""
+
 msgid "Show Rulers"
 msgstr ""
 
@@ -816,6 +819,21 @@ msgstr ""
 msgid "A color of the grid"
 msgstr ""
 
+msgid "Pixel Grid"
+msgstr ""
+
+msgid "Show at zoom:"
+msgstr ""
+
+msgid "Sets the minimal zoom at which pixel grid will be shown"
+msgstr ""
+
+msgid "Pixel grid color:"
+msgstr ""
+
+msgid "A color of the pixel grid"
+msgstr ""
+
 msgid "Transparency"
 msgstr ""
 

project.godot

@@ -429,6 +429,11 @@ right_pan_tool={
 "events": [ Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":0,"alt":true,"shift":false,"control":false,"meta":false,"command":false,"pressed":false,"scancode":77,"unicode":0,"echo":false,"script":null)
  ]
 }
+show_pixel_grid={
+"deadzone": 0.5,
+"events": [ Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":0,"alt":false,"shift":false,"control":true,"meta":false,"command":true,"pressed":false,"scancode":72,"unicode":0,"echo":false,"script":null)
+ ]
+}
 
 [locale]
 

src/Autoload/Global.gd

@@ -52,10 +52,12 @@ var default_image_width := 64
 var default_image_height := 64
 var default_fill_color := Color(0, 0, 0, 0)
 var grid_type = Grid_Types.CARTESIAN
-var grid_width := 1
+var grid_width := 2
-var grid_height := 1
+var grid_height := 2
 var grid_isometric_cell_size := 2
 var grid_color := Color.black
+var pixel_grid_show_at_zoom := 1500.0 # percentage
+var pixel_grid_color := Color("91212121")
 var guide_color := Color.purple
 var checker_size := 10
 var checker_color_1 := Color(0.47, 0.47, 0.47, 1)
@@ -78,6 +80,7 @@ var right_square_indicator_visible := false
 # View menu options
 var mirror_view := false
 var draw_grid := false
+var draw_pixel_grid := false
 var show_rulers := true
 var show_guides := true
 var show_animation_timeline := true
@@ -225,11 +228,11 @@ func _ready() -> void:
 
 	tile_mode_submenu = PopupMenu.new()
 	tile_mode_submenu.set_name("tile_mode_submenu")
-	tile_mode_submenu.add_radio_check_item("None", 0)
+	tile_mode_submenu.add_radio_check_item("None", Tile_Mode.NONE)
-	tile_mode_submenu.set_item_checked(0, true)
+	tile_mode_submenu.set_item_checked(Tile_Mode.NONE, true)
-	tile_mode_submenu.add_radio_check_item("Tiled In Both Axis", 1)
+	tile_mode_submenu.add_radio_check_item("Tiled In Both Axis", Tile_Mode.BOTH)
-	tile_mode_submenu.add_radio_check_item("Tiled In X Axis", 2)
+	tile_mode_submenu.add_radio_check_item("Tiled In X Axis", Tile_Mode.XAXIS)
-	tile_mode_submenu.add_radio_check_item("Tiled In Y Axis", 3)
+	tile_mode_submenu.add_radio_check_item("Tiled In Y Axis", Tile_Mode.YAXIS)
 	tile_mode_submenu.hide_on_checkable_item_selection = false
 
 	new_image_dialog = find_node_by_name(root, "CreateNewImage")
@@ -342,6 +345,7 @@ func undo(_frame_index := -1, _layer_index := -1, project : Project = current_pr
 			canvas.camera_zoom()
 			Global.canvas.grid.isometric_polylines.clear()
 			Global.canvas.grid.update()
+			Global.canvas.pixel_grid.update()
 			Global.cursor_position_label.text = "[%s×%s]" % [project.size.x, project.size.y]
 
 	elif "Frame" in action_name:
@@ -373,6 +377,7 @@ func redo(_frame_index := -1, _layer_index := -1, project : Project = current_pr
 			canvas.camera_zoom()
 			Global.canvas.grid.isometric_polylines.clear()
 			Global.canvas.grid.update()
+			Global.canvas.pixel_grid.update()
 			Global.cursor_position_label.text = "[%s×%s]" % [project.size.x, project.size.y]
 
 	elif "Frame" in action_name:

src/Classes/Project.gd

@@ -176,6 +176,7 @@ func change_project() -> void:
 	Global.canvas.update()
 	Global.canvas.grid.isometric_polylines.clear()
 	Global.canvas.grid.update()
+	Global.canvas.pixel_grid.update()
 	Global.transparent_checker._ready()
 	Global.animation_timeline.fps_spinbox.value = fps
 	Global.horizontal_ruler.update()
@@ -205,11 +206,8 @@ func change_project() -> void:
 	else:
 		Global.file_menu.get_popup().set_item_text(6, tr("Export") + " %s" % (file_name + Export.file_format_string(file_format)))
 
-	for j in range(len(Global.Tile_Mode)):
+	for j in Global.Tile_Mode.values():
-		if j != tile_mode:
+		Global.tile_mode_submenu.set_item_checked(j, j == tile_mode)
-			Global.tile_mode_submenu.set_item_checked(j, false)
-		else:
-			Global.tile_mode_submenu.set_item_checked(j, true)
 
 
 

src/Preferences/PreferencesDialog.gd

@@ -22,6 +22,8 @@ var preferences = [
 	["grid_height", "Canvas/GridOptions/GridHeightValue", "value", Global.grid_height],
 	["grid_isometric_cell_size", "Canvas/GridOptions/IsometricCellSizeValue", "value", Global.grid_isometric_cell_size],
 	["grid_color", "Canvas/GridOptions/GridColor", "color", Global.grid_color],
+	["pixel_grid_show_at_zoom", "Canvas/PixelGridOptions/ShowAtZoom", "value", Global.pixel_grid_show_at_zoom],
+	["pixel_grid_color", "Canvas/PixelGridOptions/GridColor", "color", Global.pixel_grid_color],
 	["guide_color", "Canvas/GuideOptions/GuideColor", "color", Global.guide_color],
 	["checker_size", "Canvas/CheckerOptions/CheckerSizeValue", "value", Global.checker_size],
 	["checker_color_1", "Canvas/CheckerOptions/CheckerColor1", "color", Global.checker_color_1],
@@ -130,6 +132,9 @@ func preference_update(prop : String) -> void:
 		Global.canvas.grid.isometric_polylines.clear()
 		Global.canvas.grid.update()
 
+	if prop in ["pixel_grid_show_at_zoom", "pixel_grid_color"]:
+		Global.canvas.pixel_grid.update()
+
 	if prop in ["checker_size", "checker_color_1", "checker_color_2", "checker_follow_movement", "checker_follow_scale"]:
 		Global.transparent_checker._ready()
 

src/Preferences/PreferencesDialog.tscn

@@ -386,6 +386,67 @@ margin_top = 226.0
 margin_right = 498.0
 margin_bottom = 230.0
 
+[node name="PixelGridLabel" type="Label" parent="HSplitContainer/ScrollContainer/VBoxContainer/Canvas"]
+margin_top = 234.0
+margin_right = 498.0
+margin_bottom = 248.0
+text = "Pixel Grid"
+
+[node name="PixelGridOptions" type="GridContainer" parent="HSplitContainer/ScrollContainer/VBoxContainer/Canvas"]
+margin_top = 122.0
+margin_right = 498.0
+margin_bottom = 222.0
+custom_constants/vseparation = 4
+custom_constants/hseparation = 4
+columns = 3
+
+[node name="ShowAtZoomLabel" type="Label" parent="HSplitContainer/ScrollContainer/VBoxContainer/Canvas/PixelGridOptions"]
+margin_left = 234.0
+margin_top = 3.0
+margin_right = 344.0
+margin_bottom = 17.0
+rect_min_size = Vector2( 110, 0 )
+hint_tooltip = "Sets the minimal zoom at which pixel grid will be shown"
+mouse_filter = 0
+text = "Show at zoom:"
+
+[node name="ShowAtZoom" type="SpinBox" parent="HSplitContainer/ScrollContainer/VBoxContainer/Canvas/PixelGridOptions"]
+margin_top = 24.0
+margin_right = 123.0
+margin_bottom = 48.0
+rect_min_size = Vector2( 80, 0 )
+hint_tooltip = "Sets the minimal zoom at which pixel grid will be shown"
+mouse_default_cursor_shape = 2
+min_value = 500.0
+max_value = 16384.0
+step = 100.0
+value = 1500.0
+rounded = true
+align = 2
+suffix = "%"
+
+[node name="GridColorLabel" type="Label" parent="HSplitContainer/ScrollContainer/VBoxContainer/Canvas/PixelGridOptions"]
+margin_left = 234.0
+margin_top = 57.0
+margin_right = 344.0
+margin_bottom = 71.0
+hint_tooltip = "A color of the pixel grid"
+mouse_filter = 0
+text = "Pixel grid color:"
+
+[node name="GridColor" type="ColorPickerButton" parent="HSplitContainer/ScrollContainer/VBoxContainer/Canvas/PixelGridOptions"]
+margin_top = 80.0
+margin_right = 123.0
+margin_bottom = 100.0
+rect_min_size = Vector2( 64, 20 )
+hint_tooltip = "A color of the pixel grid"
+mouse_default_cursor_shape = 2
+
+[node name="HSeparator4" type="HSeparator" parent="HSplitContainer/ScrollContainer/VBoxContainer/Canvas"]
+margin_top = 226.0
+margin_right = 498.0
+margin_bottom = 230.0
+
 [node name="TransparencyLabel" type="Label" parent="HSplitContainer/ScrollContainer/VBoxContainer/Canvas"]
 margin_top = 234.0
 margin_right = 498.0

src/UI/Canvas/CameraMovement.gd

@@ -174,6 +174,7 @@ func zoom_changed() -> void:
 	update_transparent_checker_offset()
 	if name == "Camera2D":
 		Global.zoom_level_label.text = str(round(100 / zoom.x)) + " %"
+		Global.canvas.pixel_grid.update()
 		update_rulers()
 		for guide in Global.current_project.guides:
 			guide.width = zoom.x * 2

src/UI/Canvas/Canvas.gd

@@ -10,6 +10,7 @@ var sprite_changed_this_frame := false # for optimization purposes
 
 onready var currently_visible_frame : Viewport = $CurrentlyVisibleFrame
 onready var current_frame_drawer = $CurrentlyVisibleFrame/CurrentFrameDrawer
+onready var pixel_grid = $PixelGrid
 onready var grid = $Grid
 onready var tile_mode = $TileMode
 onready var indicators = $Indicators

src/UI/Canvas/Canvas.tscn

@@ -1,10 +1,11 @@
-[gd_scene load_steps=7 format=2]
+[gd_scene load_steps=8 format=2]
 
 [ext_resource path="res://src/UI/Canvas/Canvas.gd" type="Script" id=1]
 [ext_resource path="res://src/UI/Canvas/Grid.gd" type="Script" id=2]
 [ext_resource path="res://src/UI/Canvas/Indicators.gd" type="Script" id=3]
 [ext_resource path="res://src/UI/Canvas/TileMode.gd" type="Script" id=4]
 [ext_resource path="res://src/UI/Canvas/CurrentFrameDrawer.gd" type="Script" id=5]
+[ext_resource path="res://src/UI/Canvas/PixelGrid.gd" type="Script" id=6]
 
 [sub_resource type="CanvasItemMaterial" id=1]
 blend_mode = 4
@@ -24,12 +25,15 @@ render_target_update_mode = 3
 [node name="CurrentFrameDrawer" type="Node2D" parent="CurrentlyVisibleFrame"]
 script = ExtResource( 5 )
 
-[node name="Grid" type="Node2D" parent="."]
-script = ExtResource( 2 )
-
 [node name="TileMode" type="Node2D" parent="."]
 material = SubResource( 1 )
 script = ExtResource( 4 )
 
+[node name="PixelGrid" type="Node2D" parent="."]
+script = ExtResource( 6 )
+
+[node name="Grid" type="Node2D" parent="."]
+script = ExtResource( 2 )
+
 [node name="Indicators" type="Node2D" parent="."]
 script = ExtResource( 3 )

src/UI/Canvas/Grid.gd

@@ -10,13 +10,13 @@ func _draw() -> void:
 
 
 func draw_grid(grid_type : int) -> void:
-	var size : Vector2 = Global.transparent_checker.rect_size
+	var size : Vector2 = Global.current_project.size
 	if grid_type == Global.Grid_Types.CARTESIAN || grid_type == Global.Grid_Types.ALL:
-		for x in range(Global.grid_width, size.x, Global.grid_width):
+		for x in range(0, size.x + 1, Global.grid_width):
-			draw_line(Vector2(x, 0), Vector2(x, size.y), Global.grid_color, true)
+			draw_line(Vector2(x, 0), Vector2(x, size.y), Global.grid_color)
 
-		for y in range(Global.grid_height, size.y, Global.grid_height):
+		for y in range(0, size.y + 1, Global.grid_height):
-			draw_line(Vector2(0, y), Vector2(size.x, y), Global.grid_color, true)
+			draw_line(Vector2(0, y), Vector2(size.x, y), Global.grid_color)
 
 	if grid_type == Global.Grid_Types.ISOMETRIC || grid_type == Global.Grid_Types.ALL:
 		var i := 0

src/UI/Canvas/PixelGrid.gd

@@ -0,0 +1,34 @@
+extends Node2D
+
+
+func _draw() -> void:
+	if not Global.draw_pixel_grid:
+		return
+
+	var zoom_percentage := 100.0 / Global.camera.zoom.x
+	if zoom_percentage < Global.pixel_grid_show_at_zoom:
+		return
+
+	var rect : Rect2 = get_rect_to_draw()
+	if rect.has_no_area():
+		return
+
+	for x in range(ceil(rect.position.x), floor(rect.end.x) + 1):
+		draw_line(Vector2(x, rect.position.y), Vector2(x, rect.end.y), Global.pixel_grid_color)
+	for y in range(ceil(rect.position.y), floor(rect.end.y) + 1):
+		draw_line(Vector2(rect.position.x, y), Vector2(rect.end.x, y), Global.pixel_grid_color)
+
+
+func get_rect_to_draw() -> Rect2:
+	var size := Global.current_project.size
+	var tiling_rect : Rect2
+	match Global.current_project.tile_mode:
+		Global.Tile_Mode.NONE:
+			tiling_rect = Rect2(Vector2.ZERO, size)
+		Global.Tile_Mode.XAXIS:
+			tiling_rect = Rect2(Vector2(-1, 0) * size, Vector2(3, 1) * size)
+		Global.Tile_Mode.YAXIS:
+			tiling_rect = Rect2(Vector2(0, -1) * size, Vector2(1, 3) * size)
+		Global.Tile_Mode.BOTH:
+			tiling_rect = Rect2(Vector2(-1, -1) * size, Vector2(3, 3) * size)
+	return tiling_rect

src/UI/Canvas/TileMode.gd

@@ -23,7 +23,7 @@ func _draw() -> void:
 
 func get_tile_positions(size):
 	match Global.current_project.tile_mode:
-		1:
+		Global.Tile_Mode.BOTH:
 			return [
 				Vector2(0, size.y), # Down
 				Vector2(-size.x, size.y), # Down left
@@ -34,12 +34,12 @@ func get_tile_positions(size):
 				Vector2(size.x, 0), # Right
 				size # Down right
 			]
-		2:
+		Global.Tile_Mode.XAXIS:
 			return [
 				Vector2(size.x, 0), # Right
 				Vector2(-size.x, 0), # Left
 			]
-		3:
+		Global.Tile_Mode.YAXIS:
 			return [
 				Vector2(0, size.y), # Down
 				Vector2(0, -size.y), # Up

src/UI/TopMenuContainer.gd

@@ -1,6 +1,13 @@
 extends Panel
 
 
+enum FILE_MENU_ID {NEW, OPEN, OPEN_LAST_PROJECT, SAVE, SAVE_AS, EXPORT, EXPORT_AS, QUIT}
+enum EDIT_MENU_ID {UNDO, REDO, COPY, CUT, PASTE, DELETE, CLEAR_SELECTION, PREFERENCES}
+enum VIEW_MENU_ID {TILE_MODE, MIRROR_VIEW, SHOW_GRID, SHOW_PIXEL_GRID, SHOW_RULERS, SHOW_GUIDES, SHOW_ANIMATION_TIMELINE, ZEN_MODE, FULLSCREEN_MODE}
+enum IMAGE_MENU_ID {SCALE_IMAGE, CROP_IMAGE, RESIZE_CANVAS, FLIP, ROTATE, INVERT_COLORS, DESATURATION, OUTLINE, HSV, GRADIENT, SHADER}
+enum HELP_MENU_ID {VIEW_SPLASH_SCREEN, ONLINE_DOCS, ISSUE_TRACKER, CHANGELOG, ABOUT_PIXELORAMA}
+
+
 var file_menu : PopupMenu
 var view_menu : PopupMenu
 var zen_mode := false
@@ -15,7 +22,7 @@ func _ready() -> void:
 
 
 func setup_file_menu() -> void:
-	var file_menu_items := {
+	var file_menu_items := { # order as in FILE_MENU_ID enum
 		"New..." : InputMap.get_action_list("new_file")[0].get_scancode_with_modifiers(),
 		"Open..." : InputMap.get_action_list("open_file")[0].get_scancode_with_modifiers(),
 		'Open last project...' : 0,
@@ -39,8 +46,8 @@ func setup_file_menu() -> void:
 	file_menu.connect("id_pressed", self, "file_menu_id_pressed")
 
 	if OS.get_name() == "HTML5":
-		file_menu.set_item_disabled(2, true)
+		file_menu.set_item_disabled(FILE_MENU_ID.OPEN_LAST_PROJECT, true)
-		file_menu.set_item_disabled(3, true)
+		file_menu.set_item_disabled(FILE_MENU_ID.SAVE, true)
 
 
 func setup_recent_projects_submenu(item : String) -> void:
@@ -52,7 +59,7 @@ func setup_recent_projects_submenu(item : String) -> void:
 
 
 func setup_edit_menu() -> void:
-	var edit_menu_items := {
+	var edit_menu_items := { # order as in EDIT_MENU_ID enum
 		"Undo" : InputMap.get_action_list("undo")[0].get_scancode_with_modifiers(),
 		"Redo" : InputMap.get_action_list("redo")[0].get_scancode_with_modifiers(),
 		"Copy" : InputMap.get_action_list("copy")[0].get_scancode_with_modifiers(),
@@ -73,10 +80,11 @@ func setup_edit_menu() -> void:
 
 
 func setup_view_menu() -> void:
-	var view_menu_items := {
+	var view_menu_items := { # order as in VIEW_MENU_ID enum
 		"Tile Mode" : 0,
 		"Mirror View" : InputMap.get_action_list("mirror_view")[0].get_scancode_with_modifiers(),
 		"Show Grid" : InputMap.get_action_list("show_grid")[0].get_scancode_with_modifiers(),
+		"Show Pixel Grid" : InputMap.get_action_list("show_pixel_grid")[0].get_scancode_with_modifiers(),
 		"Show Rulers" : InputMap.get_action_list("show_rulers")[0].get_scancode_with_modifiers(),
 		"Show Guides" : InputMap.get_action_list("show_guides")[0].get_scancode_with_modifiers(),
 		"Show Animation Timeline" : 0,
@@ -92,9 +100,9 @@ func setup_view_menu() -> void:
 		else:
 			view_menu.add_check_item(item, i, view_menu_items[item])
 		i += 1
-	view_menu.set_item_checked(3, true) # Show Rulers
+	view_menu.set_item_checked(VIEW_MENU_ID.SHOW_RULERS, true)
-	view_menu.set_item_checked(4, true) # Show Guides
+	view_menu.set_item_checked(VIEW_MENU_ID.SHOW_GUIDES, true)
-	view_menu.set_item_checked(5, true) # Show Animation Timeline
+	view_menu.set_item_checked(VIEW_MENU_ID.SHOW_ANIMATION_TIMELINE, true)
 	view_menu.hide_on_checkable_item_selection = false
 	view_menu.connect("id_pressed", self, "view_menu_id_pressed")
 
@@ -106,7 +114,7 @@ func setup_tile_mode_submenu(item : String):
 
 
 func setup_image_menu() -> void:
-	var image_menu_items := {
+	var image_menu_items := { # order as in IMAGE_MENU_ID enum
 		"Scale Image" : 0,
 		"Crop Image" : 0,
 		"Resize Canvas" : 0,
@@ -124,7 +132,7 @@ func setup_image_menu() -> void:
 	var i := 0
 	for item in image_menu_items.keys():
 		image_menu.add_item(item, i, image_menu_items[item])
-		if i == 2:
+		if i == IMAGE_MENU_ID.RESIZE_CANVAS:
 			image_menu.add_separator()
 		i += 1
 
@@ -132,7 +140,7 @@ func setup_image_menu() -> void:
 
 
 func setup_help_menu() -> void:
-	var help_menu_items := {
+	var help_menu_items := { # order as in HELP_MENU_ID enum
 		"View Splash Screen" : 0,
 		"Online Docs" : InputMap.get_action_list("open_docs")[0].get_scancode_with_modifiers(),
 		"Issue Tracker" : 0,
@@ -151,22 +159,22 @@ func setup_help_menu() -> void:
 
 func file_menu_id_pressed(id : int) -> void:
 	match id:
-		0: # New
+		FILE_MENU_ID.NEW:
 			on_new_project_file_menu_option_pressed()
-		1: # Open
+		FILE_MENU_ID.OPEN:
 			open_project_file()
-		2: # Open last project
+		FILE_MENU_ID.OPEN_LAST_PROJECT:
 			on_open_last_project_file_menu_option_pressed()
-		3: # Save
+		FILE_MENU_ID.SAVE:
 			save_project_file()
-		4: # Save as
+		FILE_MENU_ID.SAVE_AS:
 			save_project_file_as()
-		5: # Export
+		FILE_MENU_ID.EXPORT:
 			export_file()
-		6: # Export as
+		FILE_MENU_ID.EXPORT_AS:
 			Global.export_dialog.popup_centered()
 			Global.dialog_open(true)
-		7: # Quit
+		FILE_MENU_ID.QUIT:
 			Global.control.show_quit_dialog()
 
 
@@ -230,80 +238,85 @@ func on_recent_projects_submenu_id_pressed(id : int) -> void:
 
 func edit_menu_id_pressed(id : int) -> void:
 	match id:
-		0: # Undo
+		EDIT_MENU_ID.UNDO:
 			Global.current_project.undo_redo.undo()
-		1: # Redo
+		EDIT_MENU_ID.REDO:
 			Global.control.redone = true
 			Global.current_project.undo_redo.redo()
 			Global.control.redone = false
-		2: # Copy
+		EDIT_MENU_ID.COPY:
 			Global.selection_rectangle.copy()
-		3: # cut
+		EDIT_MENU_ID.CUT:
 			Global.selection_rectangle.cut()
-		4: # paste
+		EDIT_MENU_ID.PASTE:
 			Global.selection_rectangle.paste()
-		5: # Delete
+		EDIT_MENU_ID.DELETE:
 			Global.selection_rectangle.delete()
-		6: # Clear selection
+		EDIT_MENU_ID.CLEAR_SELECTION:
 			Global.selection_rectangle.set_rect(Rect2(0, 0, 0, 0))
 			Global.selection_rectangle.select_rect()
-		7: # Preferences
+		EDIT_MENU_ID.PREFERENCES:
 			Global.preferences_dialog.popup_centered(Vector2(400, 280))
 			Global.dialog_open(true)
 
 
 func view_menu_id_pressed(id : int) -> void:
 	match id:
-		1: # Mirror View
+		VIEW_MENU_ID.MIRROR_VIEW:
 			toggle_mirror_view()
-		2: # Show grid
+		VIEW_MENU_ID.SHOW_GRID:
 			toggle_show_grid()
-		3: # Show rulers
+		VIEW_MENU_ID.SHOW_PIXEL_GRID:
+			toggle_show_pixel_grid()
+		VIEW_MENU_ID.SHOW_RULERS:
 			toggle_show_rulers()
-		4: # Show guides
+		VIEW_MENU_ID.SHOW_GUIDES:
 			toggle_show_guides()
-		5: # Show animation timeline
+		VIEW_MENU_ID.SHOW_ANIMATION_TIMELINE:
 			toggle_show_anim_timeline()
-		6: # Zen mode
+		VIEW_MENU_ID.ZEN_MODE:
 			toggle_zen_mode()
-		7: # Fullscreen mode
+		VIEW_MENU_ID.FULLSCREEN_MODE:
 			toggle_fullscreen()
 	Global.canvas.update()
 
 
 func tile_mode_submenu_id_pressed(id : int) -> void:
+	Global.current_project.tile_mode = id
 	Global.transparent_checker._init_position(id)
-	for i in range(len(Global.Tile_Mode)):
+	for i in Global.Tile_Mode.values():
-		if i != id:
+		Global.tile_mode_submenu.set_item_checked(i, i == id)
-			Global.tile_mode_submenu.set_item_checked(i, false)
-		else:
-			Global.tile_mode_submenu.set_item_checked(i, true)
 	Global.canvas.tile_mode.update()
-	Global.canvas.grid.update()
+	Global.canvas.pixel_grid.update()
-	Global.canvas.grid.set_position(Global.transparent_checker.get_position())
 
 
 func toggle_mirror_view() -> void:
 	Global.mirror_view = !Global.mirror_view
-	view_menu.set_item_checked(1, Global.mirror_view)
+	view_menu.set_item_checked(VIEW_MENU_ID.MIRROR_VIEW, Global.mirror_view)
 
 
 func toggle_show_grid() -> void:
 	Global.draw_grid = !Global.draw_grid
-	view_menu.set_item_checked(2, Global.draw_grid)
+	view_menu.set_item_checked(VIEW_MENU_ID.SHOW_GRID, Global.draw_grid)
 	Global.canvas.grid.update()
 
 
+func toggle_show_pixel_grid() -> void:
+	Global.draw_pixel_grid = !Global.draw_pixel_grid
+	view_menu.set_item_checked(VIEW_MENU_ID.SHOW_PIXEL_GRID, Global.draw_pixel_grid)
+	Global.canvas.pixel_grid.update()
+
+
 func toggle_show_rulers() -> void:
 	Global.show_rulers = !Global.show_rulers
-	view_menu.set_item_checked(3, Global.show_rulers)
+	view_menu.set_item_checked(VIEW_MENU_ID.SHOW_RULERS, Global.show_rulers)
 	Global.horizontal_ruler.visible = Global.show_rulers
 	Global.vertical_ruler.visible = Global.show_rulers
 
 
 func toggle_show_guides() -> void:
 	Global.show_guides = !Global.show_guides
-	view_menu.set_item_checked(4, Global.show_guides)
+	view_menu.set_item_checked(VIEW_MENU_ID.SHOW_GUIDES, Global.show_guides)
 	for guide in Global.canvas.get_children():
 		if guide is Guide and guide in Global.current_project.guides:
 			guide.visible = Global.show_guides
@@ -318,7 +331,7 @@ func toggle_show_anim_timeline() -> void:
 	if zen_mode:
 		return
 	Global.show_animation_timeline = !Global.show_animation_timeline
-	view_menu.set_item_checked(5, Global.show_animation_timeline)
+	view_menu.set_item_checked(VIEW_MENU_ID.SHOW_ANIMATION_TIMELINE, Global.show_animation_timeline)
 	Global.animation_timeline.visible = Global.show_animation_timeline
 
 
@@ -329,12 +342,12 @@ func toggle_zen_mode() -> void:
 	Global.control.get_node("MenuAndUI/UI/RightPanel").visible = zen_mode
 	Global.control.get_node("MenuAndUI/UI/CanvasAndTimeline/ViewportAndRulers/TabsContainer").visible = zen_mode
 	zen_mode = !zen_mode
-	view_menu.set_item_checked(6, zen_mode)
+	view_menu.set_item_checked(VIEW_MENU_ID.ZEN_MODE, zen_mode)
 
 
 func toggle_fullscreen() -> void:
 	OS.window_fullscreen = !OS.window_fullscreen
-	view_menu.set_item_checked(7, OS.window_fullscreen)
+	view_menu.set_item_checked(VIEW_MENU_ID.FULLSCREEN_MODE, OS.window_fullscreen)
 
 
 func image_menu_id_pressed(id : int) -> void:
@@ -342,41 +355,41 @@ func image_menu_id_pressed(id : int) -> void:
 		return
 	var image : Image = Global.current_project.frames[Global.current_project.current_frame].cels[Global.current_project.current_layer].image
 	match id:
-		0: # Scale Image
+		IMAGE_MENU_ID.SCALE_IMAGE:
 			show_scale_image_popup()
 
-		1: # Crop Image
+		IMAGE_MENU_ID.CROP_IMAGE:
 			DrawingAlgos.crop_image(image)
 
-		2: # Resize Canvas
+		IMAGE_MENU_ID.RESIZE_CANVAS:
 			show_resize_canvas_popup()
 
-		3: # Flip
+		IMAGE_MENU_ID.FLIP:
 			Global.control.get_node("Dialogs/ImageEffects/FlipImageDialog").popup_centered()
 			Global.dialog_open(true)
 
-		4: # Rotate
+		IMAGE_MENU_ID.ROTATE:
 			show_rotate_image_popup()
 
-		5: # Invert Colors
+		IMAGE_MENU_ID.INVERT_COLORS:
 			Global.control.get_node("Dialogs/ImageEffects/InvertColorsDialog").popup_centered()
 			Global.dialog_open(true)
 
-		6: # Desaturation
+		IMAGE_MENU_ID.DESATURATION:
 			Global.control.get_node("Dialogs/ImageEffects/DesaturateDialog").popup_centered()
 			Global.dialog_open(true)
 
-		7: # Outline
+		IMAGE_MENU_ID.OUTLINE:
 			show_add_outline_popup()
 
-		8: # HSV
+		IMAGE_MENU_ID.HSV:
 			show_hsv_configuration_popup()
 
-		9: # Gradient
+		IMAGE_MENU_ID.GRADIENT:
 			Global.control.get_node("Dialogs/ImageEffects/GradientDialog").popup_centered()
 			Global.dialog_open(true)
 
-		10: # Shader
+		IMAGE_MENU_ID.SHADER:
 			Global.control.get_node("Dialogs/ImageEffects/ShaderEffect").popup_centered()
 			Global.dialog_open(true)
 
@@ -408,19 +421,19 @@ func show_hsv_configuration_popup() -> void:
 
 func help_menu_id_pressed(id : int) -> void:
 	match id:
-		0: # Splash Screen
+		HELP_MENU_ID.VIEW_SPLASH_SCREEN:
 			Global.control.get_node("Dialogs/SplashDialog").popup_centered()
 			Global.dialog_open(true)
-		1: # Online Docs
+		HELP_MENU_ID.ONLINE_DOCS:
 			OS.shell_open("https://orama-interactive.github.io/Pixelorama-Docs/")
-		2: # Issue Tracker
+		HELP_MENU_ID.ISSUE_TRACKER:
 			OS.shell_open("https://github.com/Orama-Interactive/Pixelorama/issues")
-		3: # Changelog
+		HELP_MENU_ID.CHANGELOG:
 			if OS.get_name() == "OSX":
 				# Issue #275 - remove when macOS builds use Godot 3.2.3
 				OS.shell_open("https://github.com/Orama-Interactive/Pixelorama/blob/master/CHANGELOG.md")
 			else:
 				OS.shell_open("https://github.com/Orama-Interactive/Pixelorama/blob/master/CHANGELOG.md#v082---2020-12-12")
-		4: # About Pixelorama
+		HELP_MENU_ID.ABOUT_PIXELORAMA:
 			Global.control.get_node("Dialogs/AboutDialog").popup_centered()
 			Global.dialog_open(true)

src/UI/TransparentChecker.gd

@@ -23,21 +23,17 @@ func _on_TransparentChecker_resized() -> void:
 	material.set_shader_param("rect_size", rect_size)
 
 
-func _init_position(id : int) -> void:
+func _init_position(tile_mode : int) -> void:
-	match id:
+	match tile_mode:
-		0:
+		Global.Tile_Mode.NONE:
-			Global.current_project.tile_mode = Global.Tile_Mode.NONE
 			Global.transparent_checker.set_size(Global.current_project.size)
 			Global.transparent_checker.set_position(Vector2.ZERO)
-		1:
+		Global.Tile_Mode.BOTH:
-			Global.current_project.tile_mode = Global.Tile_Mode.BOTH
 			Global.transparent_checker.set_size(Global.current_project.size*3)
 			Global.transparent_checker.set_position(-Global.current_project.size)
-		2:
+		Global.Tile_Mode.XAXIS:
-			Global.current_project.tile_mode = Global.Tile_Mode.XAXIS
 			Global.transparent_checker.set_size(Vector2(Global.current_project.size.x*3, Global.current_project.size.y*1))
 			Global.transparent_checker.set_position(Vector2(-Global.current_project.size.x, 0))
-		3:
+		Global.Tile_Mode.YAXIS:
-			Global.current_project.tile_mode = Global.Tile_Mode.YAXIS
 			Global.transparent_checker.set_size(Vector2(Global.current_project.size.x*1, Global.current_project.size.y*3))
 			Global.transparent_checker.set_position(Vector2(0, -Global.current_project.size.y))