Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision 		Previous revision
gdevelop5:interface:preview [2020/06/28 13:30]
4ian created 		gdevelop5:interface:preview [2020/12/26 13:56] (current)
Line 4: Line 4:
  
 {{ :gdevelop5:interface:preview:pasted:20200628-132309.png?nolink }} {{ :gdevelop5:interface:preview:pasted:20200628-132309.png?nolink }}
-_In order: The Project Manager button, the Export button, the Preview button and the Debug button._+_From left to right: the Project Manager button, the Export button, the Play button and the Debug button._
  
-You can also access more options by right clicking this button. The "Debug" button on the right allow you to open a Network Preview.+You can also access more options by right clicking the "Play" button. The "Debug" button on the right allows you to open a Network Preview.
  
-## Launch a preview of the scene+After you click the "Play" button to launch a preview, the game is opened and run in a separate window:
  
-By clicking on the "Play" button, you can launch a preview of your game.+{{:gdevelop5:interface:preview:pasted:20200628-152852.png}} 
 + 
 +## Launch a preview of a scene 
 + 
 +By clicking on the "Play" button, you can launch a preview of your game. By default, the preview will start with the scene that you're currently editing (or from the first scene if you've not opened any scene).
  
 {{ :gdevelop5:preview-button.png?nolink |}} {{ :gdevelop5:preview-button.png?nolink |}}
  
 The preview will open in a separate window. Close the preview window to end it. The preview will open in a separate window. Close the preview window to end it.
 +
 +### Apply your changes to your live preview
 +
 +When the preview of your game is running, you can click again the Play button to apply any changes that you made in the editor to your preview. This is very useful for example to design the level of your game while playing to it, allowing you to quickly see and test the result without having to restart from the beginning of the level after each change.
 +
 +When a preview is running in a window, the "Play" button icon will change to indicate that you can apply your changes to this preview (this is called "Live Preview" or, using more technical terms, "Hot Reloading"):
 +
 +{{ :gdevelop5:interface:preview:pasted:20200628-154642.png?nolink }}
 +
 +After clicking on it, GDevelop will internally re-generate the game and will then update the preview. Any modification on objects, in the scene, in events, layers, variables or extensions will be reflected in the preview:
 +
 +{{ :gdevelop5:interface:editing_a_level_with_live_preview.gif?nolink |}}
 +
 +<note tip>This is especially useful when you want to do some tweaks to your game, like changing the parameters of effects or the properties of the behavior of an object, and see the result directly. It's also useful to check how your events are working without restarting your preview from the beginning.</note>
 +
 +Some editors also include a button allowing you to start a preview or apply changes that you made directly from the editor:
 +
 +{{ :gdevelop5:interface:preview:pasted:20200628-162346.png?nolink }}
 +
 +When clicked, changes that you've made in the current editor will be applied to your preview(s).
 +
 +Note that in certain rare cases, GDevelop will be unable to apply your changes to the preview. In this case, a dialog will invite you to close the preview and launch a new one from scratch. If you also need to restart from the beginning, because for example you destroyed an enemy and want to try it again, just close the window and click the "Play" button again.
 +
 +### Start multiple live previews
 +
 +While a preview is running, you can right click the "Play" button to show a menu where you can launch another preview in a new window:
 +
 +{{ :gdevelop5:interface:preview:pasted:20200628-161539.png?nolink }}
 +
 +You can click the Play button to apply changes made in the editor, and all the running previews will be updated.
 +
 +### Overriding the scene used to start the preview
 +
 +By default, the preview starts with the scene that you're currently editing. If you want to force GDevelop to start your game from another scene, open first this scene, then make a right click on the "Play" button and choose "Use this scene to start all previews":
 +
 +{{ :gdevelop5:interface:preview:pasted:20200628-151214.png?nolink }}
 +
 +A flag will be added on the icon to remind you that the preview is always starting from the chosen scene, even if you're editing another one.
 +
 +You can later remove this setting by using the same menu and uncheck the option:
 +
 +{{ :gdevelop5:interface:preview:pasted:20200628-152054.png?nolink }}
  
 ## Launch a Network preview (Preview over WiFi/LAN) ## Launch a Network preview (Preview over WiFi/LAN)
Line 20: Line 66:
 By clicking the "Network preview (Preview over WiFi/LAN)" button, you can preview your game on mobile devices (or any other computer) connected on the same network as the editor: By clicking the "Network preview (Preview over WiFi/LAN)" button, you can preview your game on mobile devices (or any other computer) connected on the same network as the editor:
  
-{{ :gdevelop5:interface:preview-wifi-button.png?nolink |}}+{{ :gdevelop5:interface:preview:pasted:20200628-133253.png?nolink }}
  
 After clicking the button, a window will appear showing the address the preview is being launched on: After clicking the button, a window will appear showing the address the preview is being launched on:
Line 29: Line 75:
 {{ :gdevelop5:interface/preview-wifi-running.png?nolink |}} {{ :gdevelop5:interface/preview-wifi-running.png?nolink |}}
  
-<note tip>You can close the pop-up window in the editor and continue to edit your game. If you launch a new preview, the mobile devices and any connected computer will automatically refresh the game to show the changes made!</note>+You can now close the pop-up window in the editor and continue to edit your game. When you click on the button to apply the changes to the preview, all the previews running on your computer, other computers or tablet/phones will be updated. 
 + 
 +You can also hit the "Reload" button of your device browser to restart the preview from scratch. 
  
 ## Launch a preview with the Debugger and the Profiler ## Launch a preview with the Debugger and the Profiler
  
-The **Debugger** is a tool that can be used to inspect the content of your game (values of variables, existing instances and their properties...) and even do some real-time editing. The **profiler** is a tool to inspect the performance of your game.+The **Debugger** is a tool that can be used to inspect the content of your game (values of variables, existing instances and their properties...) and even do some real-time editing. The **Profiler** is a tool to inspect the performance of your game.
  
 You can launch the debugger using this icon: You can launch the debugger using this icon:
  
-{{ :gdevelop5:interface:scene-editor:pasted:20200406-195024.png?nolink }}+{{ :gdevelop5:interface:preview:pasted:20200628-133103.png?nolink }}
  
 [[gdevelop5:interface:debugger|See this page]] to learn more about the Debugger and the Profiler usage. [[gdevelop5:interface:debugger|See this page]] to learn more about the Debugger and the Profiler usage.