Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Small problem with composer.gotoScene() transitions
Started by dodi_games Feb 22 2017 05:51 PM

- - - - -
6 replies to this topic
composer transitions problem
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

dodi_games

[GLOBAL: userInfoPane.html]
dodi_games
  • Contributor

  • 353 posts
  • Corona SDK

Hi! I'm having a problem with composer transitions.  In simulator works great but in my Nexus 6 do not work at first time.  When I play with my buttons tapping all of them to look how its works composer transitions start working correctly.  My app have a menu with 3 widget buttons, the first one take to a heavy scene with 53 map location buttons to switch to google maps, 53 phone buttons to make a call,  second one take me to a scene with 7 buttons, this 7 buttons have the same scene code to show some images in scrollView, the only change between them is the background and the images inside the scene scrollView.  In the menu I have an Spanish button and an English button, Spanish is default scene when app start.  When I switch to english all the scenes transitions work properly.  Third menu button is under construction in another project to integrate later.

 

Here is the code I'm using in the 7 equal scenes in wich only the background and images inside scrollView change:

local composer = require( "composer" )

local scene = composer.newScene()

local widget = require( "widget" )

-- -----------------------------------------------------------------------------------
-- Code outside of the scene event functions below will only be executed ONCE unless
-- the scene is removed entirely (not recycled) via "composer.removeScene()"
-- -----------------------------------------------------------------------------------

local background
local ScrollView
local glassbar1
local shoppers
local backButton
local paintButton
local toolsButton
local bulbButton
local barrowButton
local showerButton
local hoseButton
local basketButton

--sound
local flick
local turn
local here

--shopper------------------------
local shopperImages = { "shopperimg1", "shopperimg2", "shopperimg3",
"shopperimg4", "shopperimg5", "shopperimg6", "shopperimg7" }
--shopper------------------------

local _W = display.contentWidth
local _H = display.contentHeight


local function backButtonTap ()
	audio.play( flick )
	composer.gotoScene( "scenes.en.menu_en", {effect = "crossFade", time = "375"} )
	return true
end

  --shopper scenes

local function paintButtonTap ()
	audio.play( turn )
	composer.gotoScene( "scenes.en.shopper_en", {effect = "slideLeft", time = "370"} )
	return true
end

local function toolsButtonTap ()
	audio.play( turn )
	composer.gotoScene( "scenes.en.ferreteria_en", {effect = "slideLeft", time = "370"} )
	return true
end

local function bulbButtonTap ()
	audio.play ( turn )
	composer.gotoScene( "scenes.en.electrico_en", {effect = "slideLeft", time = "370"} )
	return true
end

local function barrowButtonTap ()
	audio.play ( turn )
	composer.gotoScene( "scenes.en.construccion_en", {effect = "slideLeft", time = "370"} )
	return true
end

local function showerButtonTap ()
	audio.play ( here )
	print( "showerButton was tapped" )
	return true
end

local function hoseButtonTap ()
	audio.play ( turn )
	composer.gotoScene( "scenes.en.plomeria_en", {effect = "slideLeft", time = "370"} )
	return true
end

local function basketButtonTap ()
	audio.play ( turn )
	composer.gotoScene( "scenes.en.miscelania_en", {effect = "slideLeft", time = "370"} )
	return true
end


-- -----------------------------------------------------------------------------------
-- Scene event functions
-- -----------------------------------------------------------------------------------

-- create()
function scene:create( event )

	local sceneGroup = self.view
	-- Code here runs when the scene is first created but has not yet appeared on screen

	background = display.newImageRect( "images/background/showroombg.jpg", 768, 1024 )
        background.x = display.contentCenterX
        background.y = display.contentCenterY
	sceneGroup:insert( background )

	glassbar1 = display.newImageRect( "images/buttons/glassbar@2x.png", 375, 60 )
	glassbar1.x = display.contentWidth-460
	glassbar1.y = display.contentHeight-975
	sceneGroup:insert( glassbar1 )

	shoppers = display.newImageRect( "images/buttons/shoppers@2x.png", 131, 23 )
	shoppers.x = display.contentWidth-460
	shoppers.y = display.contentHeight-975
	sceneGroup:insert( shoppers )

	-- scroll view
	ScrollView = widget.newScrollView(
	    {
              top = 100,
              left = 120,
              width = 530,
              height = 800,
              scrollWidth = 400,
              scrollHeight = 800,
              horizontalScrollDisabled = true,
	      hideBackground = true
            }
	)
	sceneGroup:insert( ScrollView )


	--shopper images
	shopperimg1 = display.newImageRect( "images/shopper/5_showroom/banner1.jpg", 500, 240 )
	shopperimg1.x = _W-503; shopperimg1.y = _H-890;
	--sceneGroup:insert( shopperimg1 )
	ScrollView:insert( shopperimg1 )

	shopperimg2 = display.newImageRect( "images/shopper/5_showroom/banner2.jpg", 500, 240 )
	shopperimg2.x = _W-503; shopperimg2.y = shopperimg1.y+250;
	--sceneGroup:insert( shopperimg2 )
	ScrollView:insert( shopperimg2 )

	shopperimg3 = display.newImageRect( "images/shopper/5_showroom/banner3.jpg", 500, 240 )
	shopperimg3.x = _W-503; shopperimg3.y = shopperimg2.y+250;
	--sceneGroup:insert( shopperimg3 )
	ScrollView:insert( shopperimg3 )

	shopperimg4 = display.newImageRect( "images/shopper/5_showroom/banner4.jpg", 500, 240 )
	shopperimg4.x = _W-503; shopperimg4.y = shopperimg3.y+250;
	--sceneGroup:insert( shopperimg4 )
	ScrollView:insert( shopperimg4 )

	shopperimg5 = display.newImageRect( "images/shopper/5_showroom/banner5.jpg", 500, 240 )
	shopperimg5.x = _W-503; shopperimg5.y = shopperimg4.y+250;
	--sceneGroup:insert( shopperimg5 )
	ScrollView:insert( shopperimg5 )

	shopperimg6 = display.newImageRect( "images/shopper/5_showroom/banner6.jpg", 500, 240 )
	shopperimg6.x = _W-503; shopperimg6.y = shopperimg5.y+250;
	--sceneGroup:insert( shopperimg6 )
	ScrollView:insert( shopperimg6 )

	shopperimg7 = display.newImageRect( "images/shopper/5_showroom/banner7.jpg", 500, 240 )
	shopperimg7.x = _W-503; shopperimg7.y = shopperimg6.y+250;
	--sceneGroup:insert( shopperimg7 )
	ScrollView:insert( shopperimg7 )
	--shopper images



	-- back Button
        backButton = widget.newButton(
	    {
	        width = 57,
	        height = 60,
	        defaultFile = "images/buttons/back@2x.png",
	        overFile = "images/buttons/back-over@2x.png",
	    }
	)
	-- Center the back button
	backButton.x = display.contentWidth-615
	backButton.y = display.contentHeight-975
	sceneGroup:insert( backButton )

	backButton:addEventListener( "tap", backButtonTap )


	-- paint Button
	paintButton = widget.newButton(
            {
		width = 66,
		height = 70,
		defaultFile = "images/buttons/paint@2x.png",
		overFile = "images/buttons/paint-over@2x.png",
	    }
	)
	-- Center the paint button
	paintButton.x = _W-615; paintButton.y = _H-60;
	sceneGroup:insert( paintButton )

	paintButton:addEventListener( "tap", paintButtonTap )


	-- tools Button
	toolsButton = widget.newButton(
	    {
		width = 66,
		height = 70,
		defaultFile = "images/buttons/tools@2x.png",
		overFile = "images/buttons/tools-over@2x.png",
	    }
	)
	-- Center the tools button
	toolsButton.x = paintButton.x+78; toolsButton.y = _H-60;
	sceneGroup:insert( toolsButton )

	toolsButton:addEventListener( "tap", toolsButtonTap )


        -- bulb Button
        bulbButton = widget.newButton(
	    {
		width = 66,
		height = 70,
		defaultFile = "images/buttons/bulb@2x.png",
		overFile = "images/buttons/bulb-over@2x.png",
	    }
        )
        -- Center the bulb button
        bulbButton.x = toolsButton.x+78; bulbButton.y = _H-60;
        sceneGroup:insert( bulbButton )

        bulbButton:addEventListener( "tap", bulbButtonTap )


	-- barrow Button
	barrowButton = widget.newButton(
	    {
		width = 66,
		height = 70,
		defaultFile = "images/buttons/barrow@2x.png",
		overFile = "images/buttons/barrow-over@2x.png",
	    }
	)
	-- Center the barrow button
        barrowButton.x = bulbButton.x+78; barrowButton.y = _H-60;
	sceneGroup:insert( barrowButton )

	barrowButton:addEventListener( "tap", barrowButtonTap )


	-- shower Button
	showerButton = widget.newButton(
	     {
		width = 66,
		height = 70,
		defaultFile = "images/buttons/shower-on@2x.png",
		overFile = "images/buttons/shower@2x.png",
	     }
	)
	-- Center the toilet button
	showerButton.x = barrowButton.x+78; showerButton.y = _H-60;
	sceneGroup:insert( showerButton )

	showerButton:addEventListener( "tap", showerButtonTap )


	-- hose Button
	hoseButton = widget.newButton(
	    {
		width = 66,
		height = 70,
		defaultFile = "images/buttons/hose@2x.png",
		overFile = "images/buttons/hose-over@2x.png",
	    }
	)
	-- Center the hose button
	hoseButton.x = showerButton.x+78; hoseButton.y = _H-60;
	sceneGroup:insert( hoseButton )

	hoseButton:addEventListener( "tap", hoseButtonTap )


	-- basket Button
	basketButton = widget.newButton(
	    {
		width = 66,
		height = 70,
		defaultFile = "images/buttons/basket@2x.png",
		overFile = "images/buttons/basket-over@2x.png",
	    }
	)
        -- Center the basket button
	basketButton.x = hoseButton.x+78; basketButton.y = _H-60;
	sceneGroup:insert( basketButton )

	basketButton:addEventListener( "tap", basketButtonTap )

	flick = audio.loadSound( "sound/flick.wav" )
	turn = audio.loadSound( "sound/turn.wav" )
	here = audio.loadSound( "sound/here.wav" )


end


-- show()
function scene:show( event )

	local sceneGroup = self.view
	local phase = event.phase

	if ( phase == "will" ) then
		-- Code here runs when the scene is still off screen (but is about to come on screen)

	elseif ( phase == "did" ) then
		-- Code here runs when the scene is entirely on screen

	end
end


-- hide()
function scene:hide( event )

	local sceneGroup = self.view
	local phase = event.phase

	if ( phase == "will" ) then
		-- Code here runs when the scene is on screen (but is about to go off screen)

	elseif ( phase == "did" ) then
		-- Code here runs immediately after the scene goes entirely off screen

	end
end


-- destroy()
function scene:destroy( event )

	local sceneGroup = self.view
	-- Code here runs prior to the removal of scene's view
	shopperImages:removeSelf()
	shopperImages = nil

	audio.dispose( flick )
	audio.dispose( turn )
	audio.dispose( here )


end


-- -----------------------------------------------------------------------------------
-- Scene event function listeners
-- -----------------------------------------------------------------------------------
scene:addEventListener( "create", scene )
scene:addEventListener( "show", scene )
scene:addEventListener( "hide", scene )
scene:addEventListener( "destroy", scene )
-- -----------------------------------------------------------------------------------

return scene

My code is incorrect or misspelled?

 

should I insert the scrollview images in the scene too?
​using too much images?
do I need to make a separate module with all my functions?
 
​I'm using atom.
 
This is my first code in Corona SDK and my first post looking for help.  English is not my default language but I really understand it. I hope you undestandme too.
 
Thanks In advance!

 



[TOPIC: post.html]
#2

dodi_games

[GLOBAL: userInfoPane.html]
dodi_games
  • Contributor

  • 353 posts
  • Corona SDK

Do I wrote this new topic in the wrong place? Any help would be welcome.

[TOPIC: post.html]
#3

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,471 posts
  • Enterprise

It's not really in the wrong place. But you've asked a question that's kind of hard to understand. It might help for you to read this post:

 

https://forums.coronalabs.com/topic/55780-ask-a-better-question-get-a-better-answer/

 

Generally speaking when we hear "it works in the simulator but not on device", the recommendation is to look and make sure your filenames (images, audio, etc.) match the upper/lower cases letters you have in your code. For instance:  background.png and Background.png are different file names on devices, but on Windows and macOS they are the same.

 

We should be issuing a warning in the console log when this happens to help you find it. I'd start making sure your file names all exist.

 

Also, I'm not sure why you're loading the @2x versions of your images. Normally you would leave the @2x off and let Corona pick the image with the best resolution for the device.

 

Rob



[TOPIC: post.html]
#4

SGS

[GLOBAL: userInfoPane.html]
SGS
  • Corona Geek

  • 1,967 posts
  • Corona SDK

Further to what Rob said; taking one line as an example

glassbar1 = display.newImageRect( "images/buttons/glassbar@2x.png", 375, 60 )

unless your image is actually called glassbar@2x.png this will fail. you should be using

local glassbar1 = display.newImageRect( "images/buttons/glassbar.png", 375, 60 )

and providing a glassbar.png at 375x60px and a glassbar@2x.png at 750x120px



[TOPIC: post.html]
#5

dodi_games

[GLOBAL: userInfoPane.html]
dodi_games
  • Contributor

  • 353 posts
  • Corona SDK

@Rob Miracle @adrianm -- Thank you for your answers. Transitions: I solved the problem temporarily by removing all composer transitions.  However I still have a 1 second delay when changing scene.  Images:  I currently thought that my @2x image was the official project image. I usually make all my designs to 2048 x 2048, insert that big image to the scene and adjust the size using imageRect() api until it look like I want, that is my @2x and yes the file name is "imagename"@2x. As the original image is a top size I turn to it and create my @4x image. In my project folder I only have images @2x (the ones I use as default images) and @4x (In case I need a higher quality image).  That's the way I understood it was the right way to use the images. Right now I'm using images sheets created in texturepacker where the images that called them @2x became my official image on the sheet @2x.  Reading this explanation I think I'm misusing the images. 



[TOPIC: post.html]
#6

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,471 posts
  • Enterprise

Normally I would make your original image your highest resolution and name it @4x. Then resize it to 50% and name that @2x and then do another 50% resize (making it 25% of the original) and name that file without a suffix. 

 

However, this is a feature if you plan to support older, lower resolution, lower memory devices. If you're primarily targeting modern devices, using the full resolution image and just letting display.newImageRect() resize it for you is perfectly valid. In which case you wouldn't need suffixes at all.

 

Keep in mind that a 2048x2048 texture is 16MB of memory where 512x512 is 1MB of texture memory. The technique of using large images to downsize can seriously eat up memory in a hurry. 

 

Rob



[TOPIC: post.html]
#7

dodi_games

[GLOBAL: userInfoPane.html]
dodi_games
  • Contributor

  • 353 posts
  • Corona SDK

Thanks Rob Miracle,

 
I already made the image changes leaving the large image with the suffix @2x and the one I was currently calling @2x is now the default project image. I reduced all my backgrounds, for the moment, to 768x1024 (the width/height of my config lua, zoomEven scale) and export them as .jpg to low resolution for web & devices and I'm starting to see improvements in the fluidity of my app.. Once I finish doing all the images work I will start to try the transitions again. I'll let you know how it goes.



[topic_controls]
[/topic_controls]