Small problem with composer.gotoScene() transitions

Solar2D General Questions/Discussion
#1

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!

#2

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

#3

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

#4

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

#5

@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. 

#6

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

#7

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.

#8

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

#9

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

#10

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

#11

@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. 

#12

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

#13

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.