Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
[Code review] Shapes and positioning — Gideros Forum

[Code review] Shapes and positioning

rolfpancakerolfpancake Member
edited March 2016 in Game & application design
Hey I just wanted to get a grasp on the scaling modes gideros provides, so I created a little testing environment.
Thanks to @ar2rsawseen and his blog article I got a better understanding of positioning objects in a automagically scaled screen.

Now I would like to hear some critics on my code. I am not used to gideros or lua in general so the code could be a bit confusing. I am not that interested into optimizing but more into improving functionality, pattern and readability of my code. So thanks in advance :)
--[[-----------------------------------------]]--
--[[ Gideros resolution/aspect ratio example ]]--
--[[ Made by rolfpancake                     ]]--
--[[ Licence CC0                             ]]--
--[[-----------------------------------------]]--
 
--[[------------------------------------]]--
--[[ Functions and application settings ]]--
--[[------------------------------------]]--
 
-- We need a function for colors (thanks to evs)
local function rgbToColor(r, g, b)
	local hex = r * 65536 + g * 256 + b
	return hex
end
 
-- We set our aspect ratio (same as project properties)
application:setLogicalDimensions(480, 800)
 
-- Set Orientation by number (just for testing purposes)
local orientations = {
	"portrait",
	"portraitUpsideDown",
	"landscapeLeft",
	"landscapeRight"
}
 
application:setOrientation(orientations[1]) -- 1 -> portrait
 
-- Set ScaleMode by number (just for testing purposes)
local scalemodes = {
	"noScale",
	"center",
	"pixelPerfect",
	"letterbox",
	"crop",
	"stretch",
	"fitWidth",
	"fitHeight"
}
 
application:setScaleMode(scalemodes[4]) -- 4 -> letterbox
 
--[[--------------------------------]]--
--[[ Dimensions and other variables ]]--
--[[--------------------------------]]--
 
-- Logical dimensions
local WIDTH = application:getContentWidth()
local HEIGHT = application:getContentHeight()
 
-- DX and DY (thanks ar2rsawseen, read his article on <a href="http://appcodingeasy.com" rel="nofollow">http://appcodingeasy.com</a>)
local DX = application:getLogicalTranslateX() / application:getLogicalScaleX()
local DY = application:getLogicalTranslateY() / application:getLogicalScaleY()
 
-- Screen Coordinates (X = Horizontal, Y = Vertical)
local Screen = {
	LEFT = -DX, 
	RIGHT = DX + WIDTH, 
	TOP = -DY, 
	BOTTOM = DY + HEIGHT,
	CENTER_X = WIDTH / 2,
	CENTER_Y = HEIGHT / 2
}
 
-- Shape dimensions
local Rect = {WIDTH = 100, HEIGHT = 100}
 
-- Change the background. Pro-Tip: Don't use 240,240,240 <img class="emoji" src="https://forum.giderosmobile.com/resources/emoji/lol.png" title=":D" alt=":D" height="20" />
application:setBackgroundColor(rgbToColor(210, 200, 190))
 
--[[------------------------]]--
--[[ The rect in the center ]]--
--[[------------------------]]--
 
-- Init the middle shape
local midshape = Shape.new()
 
-- Set its color
midshape:setFillStyle(Shape.SOLID, rgbToColor(66, 99, 132), 1)
 
-- Draw a beautiful rect
midshape:beginPath()
	midshape:moveTo(0, 0)
	midshape:lineTo(Rect.WIDTH, 0)
	midshape:lineTo(Rect.WIDTH, Rect.HEIGHT)
	midshape:lineTo(0, Rect.HEIGHT)
	midshape:lineTo(0, 0)
midshape:endPath()
 
-- Add that shape to the stage
stage:addChild(midshape)
 
-- Push the shape to the center
midshape:setPosition(Screen.CENTER_X - Rect.WIDTH/2, Screen.CENTER_Y - Rect.HEIGHT/2)
 
--[[------------------------]]--
--[[ A rect for each corner ]]--
--[[------------------------]]--
 
-- Create 4 shapes and add them to stage
local cornershapes = {}
 
for i=1, 4 do
	-- Init the shape
	cornershapes[i] = Shape.new()
 
	-- Set color depending on the current shape
	cornershapes[i]:setFillStyle(Shape.SOLID, rgbToColor(i*60, i*45, i*35), 1)
 
	-- Draw a beautiful rect
	cornershapes[i]:beginPath()
		cornershapes[i]:moveTo(0, 0)
		cornershapes[i]:lineTo(Rect.WIDTH, 0)
		cornershapes[i]:lineTo(Rect.WIDTH, Rect.HEIGHT)
		cornershapes[i]:lineTo(0, Rect.HEIGHT)
		cornershapes[i]:lineTo(0, 0)
	cornershapes[i]:endPath()
 
	-- Add that shape to the stage
	stage:addChild(cornershapes[i])
end
 
-- Push the shapes to the corners
cornershapes[1]:setPosition(Screen.LEFT, Screen.TOP) -- topleft
cornershapes[2]:setPosition(Screen.RIGHT - Rect.WIDTH, Screen.TOP) -- topright
cornershapes[3]:setPosition(Screen.LEFT, Screen.BOTTOM - Rect.HEIGHT) -- bottomleft
cornershapes[4]:setPosition(Screen.RIGHT - Rect.WIDTH, Screen.BOTTOM - Rect.HEIGHT) -- bottomright
 
--[[------------------------------------]]--
--[[ Console log for debugging purposes ]]--
--[[------------------------------------]]--
 
---[[
	print("\n========== Testing ==========")
	print("BackgroundColor: " .. application:getBackgroundColor())
	print("ScaleMode: " .. application:getScaleMode())
	print("Orientation: " .. application:getOrientation())
	print("DeviceWidth: " .. application:getDeviceWidth())
	print("DeviceHeight: " .. application:getDeviceHeight())
	print("Device aspectratio (W:H): " .. application:getDeviceWidth() / application:getDeviceHeight())
	print("Logical WIDTH: " .. WIDTH)
	print("Logical HEIGHT: " .. HEIGHT)
	print("Logical aspectratio (W:H): " .. WIDTH / HEIGHT)
	print("DX: " .. DX)
	print("DY: " .. DY)
	print("Screen.LEFT: " .. Screen.LEFT)
	print("Screen.RIGHT: " .. Screen.RIGHT)
	print("Screen.TOP: " .. Screen.TOP)
	print("Screen.BOTTOM: " .. Screen.BOTTOM)
	print("Screen.CENTER_X: " .. Screen.CENTER_X)
	print("Screen.CENTER_Y: " .. Screen.CENTER_Y)
	print("=============================\n")
--]]

Likes: totebo, antix

+1 -1 (+2 / -0 )Share on Facebook
Sign In or Register to comment.