loading_screen.html 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1">
  6. <title>loading_screen :: jMonkeyEngine Docs</title>
  7. <link rel="canonical" href="https://wiki.jmonkeyengine.org/docs/jme3/advanced/loading_screen.html">
  8. <meta name="generator" content="Antora 2.3.3">
  9. <link rel="stylesheet" href="../../../_/css/site.css">
  10. <meta property="og:image" content="https://wiki.jmonkeyengine.org/_/img/iconx128.png">
  11. <meta property="og:description" content="loading_screen">
  12. <meta property="og:title" content="jMonkeyEngine Docs">
  13. <link rel="stylesheet" href="../../../_/css/site-extra.css">
  14. <link rel="icon" href="../../../_/img/favicon.ico" type="image/x-icon">
  15. </head>
  16. <body class="article">
  17. <header class="header">
  18. <nav class="navbar">
  19. <div class="navbar-brand">
  20. <a class="navbar-item" href="https://wiki.jmonkeyengine.org">
  21. <img alt="" src="../../../_/img/jMonkeyDocLogo.png" height="32" type="image/x-icon">
  22. </a>
  23. <div class="navbar-item hide-for-print">
  24. <input type="text" placeholder="Search docs..." id="search-input"/>
  25. </div>
  26. <button class="navbar-burger" data-target="topbar-nav">
  27. <span></span>
  28. <span></span>
  29. <span></span>
  30. </button>
  31. </div>
  32. <div id="topbar-nav" class="navbar-menu">
  33. <div class="navbar-end">
  34. <div class="navbar-item theme-switch-wrapper">
  35. <label class="theme-switch" for="checkbox">
  36. <input type="checkbox" id="checkbox" />
  37. <div class="slider round"></div>
  38. </label>
  39. </div>
  40. <a class="navbar-item" href="https://github.com/jmonkeyengine/wiki">Github</a>
  41. </div>
  42. </div>
  43. </nav>
  44. </header>
  45. <div class="body">
  46. <div class="nav-container" data-component="docs" data-version="master">
  47. <aside class="nav">
  48. <div class="panels">
  49. <div class="nav-panel-menu is-active" data-panel="menu">
  50. <nav class="nav-menu">
  51. <h3 class="title"><a href="../../documentation.html">Docs</a></h3>
  52. <ul class="nav-list">
  53. <li class="nav-item" data-depth="0">
  54. <ul class="nav-list">
  55. <li class="nav-item" data-depth="1">
  56. <a class="nav-link" href="../../documentation.html">Getting Started</a>
  57. </li>
  58. <li class="nav-item" data-depth="1">
  59. <a class="nav-link" href="https://javadoc.jmonkeyengine.org/v3.3.2-stable">JavaDoc</a>
  60. </li>
  61. <li class="nav-item" data-depth="1">
  62. <button class="nav-item-toggle"></button>
  63. <a class="nav-link" href="../../jme3.html">jMonkeyEngine 3</a>
  64. <ul class="nav-list">
  65. <li class="nav-item" data-depth="2">
  66. <button class="nav-item-toggle"></button>
  67. <span class="nav-text">Beginner Tutorials</span>
  68. <ul class="nav-list">
  69. <li class="nav-item" data-depth="3">
  70. <a class="nav-link" href="../beginner/hello_simpleapplication.html">Hello SimpleApplication</a>
  71. </li>
  72. <li class="nav-item" data-depth="3">
  73. <a class="nav-link" href="../beginner/hello_node.html">Hello Node</a>
  74. </li>
  75. <li class="nav-item" data-depth="3">
  76. <a class="nav-link" href="../beginner/hello_asset.html">Hello Asset</a>
  77. </li>
  78. <li class="nav-item" data-depth="3">
  79. <a class="nav-link" href="../beginner/hello_main_event_loop.html">Hello Main Event Loop</a>
  80. </li>
  81. <li class="nav-item" data-depth="3">
  82. <a class="nav-link" href="../beginner/hello_input_system.html">Hello Input System</a>
  83. </li>
  84. <li class="nav-item" data-depth="3">
  85. <a class="nav-link" href="../beginner/hello_material.html">Hello Material</a>
  86. </li>
  87. <li class="nav-item" data-depth="3">
  88. <a class="nav-link" href="../beginner/hello_animation.html">Hello Animation</a>
  89. </li>
  90. <li class="nav-item" data-depth="3">
  91. <a class="nav-link" href="../beginner/hello_picking.html">Hello Picking</a>
  92. </li>
  93. <li class="nav-item" data-depth="3">
  94. <a class="nav-link" href="../beginner/hello_collision.html">Hello Collision</a>
  95. </li>
  96. <li class="nav-item" data-depth="3">
  97. <a class="nav-link" href="../beginner/hello_terrain.html">Hello Terrain</a>
  98. </li>
  99. <li class="nav-item" data-depth="3">
  100. <a class="nav-link" href="../beginner/hello_audio.html">Hello Audio</a>
  101. </li>
  102. <li class="nav-item" data-depth="3">
  103. <a class="nav-link" href="../beginner/hello_effects.html">Hello Effects</a>
  104. </li>
  105. <li class="nav-item" data-depth="3">
  106. <a class="nav-link" href="../beginner/hello_physics.html">Hello Physics</a>
  107. </li>
  108. </ul>
  109. </li>
  110. <li class="nav-item" data-depth="2">
  111. <button class="nav-item-toggle"></button>
  112. <span class="nav-text">Intermediate Tutorials</span>
  113. <ul class="nav-list">
  114. <li class="nav-item" data-depth="3">
  115. <button class="nav-item-toggle"></button>
  116. <span class="nav-text">Concepts</span>
  117. <ul class="nav-list">
  118. <li class="nav-item" data-depth="4">
  119. <a class="nav-link" href="../intermediate/best_practices.html">Best Practices</a>
  120. </li>
  121. <li class="nav-item" data-depth="4">
  122. <a class="nav-link" href="../intermediate/simpleapplication.html">Simple Application</a>
  123. </li>
  124. <li class="nav-item" data-depth="4">
  125. <a class="nav-link" href="../features.html">Features</a>
  126. </li>
  127. <li class="nav-item" data-depth="4">
  128. <a class="nav-link" href="../intermediate/optimization.html">Optimization</a>
  129. </li>
  130. <li class="nav-item" data-depth="4">
  131. <a class="nav-link" href="../faq.html">FAQ</a>
  132. </li>
  133. </ul>
  134. </li>
  135. <li class="nav-item" data-depth="3">
  136. <button class="nav-item-toggle"></button>
  137. <span class="nav-text">Math Concepts</span>
  138. <ul class="nav-list">
  139. <li class="nav-item" data-depth="4">
  140. <a class="nav-link" href="../math_for_dummies.html">Math For Dummies</a>
  141. </li>
  142. <li class="nav-item" data-depth="4">
  143. <a class="nav-link" href="../intermediate/math.html">Math</a>
  144. </li>
  145. <li class="nav-item" data-depth="4">
  146. <a class="nav-link" href="../math.html">More Math</a>
  147. </li>
  148. <li class="nav-item" data-depth="4">
  149. <a class="nav-link" href="../rotate.html">Rotate</a>
  150. </li>
  151. <li class="nav-item" data-depth="4">
  152. <a class="nav-link" href="../math_video_tutorials.html">Math Video Tutorials</a>
  153. </li>
  154. </ul>
  155. </li>
  156. <li class="nav-item" data-depth="3">
  157. <button class="nav-item-toggle"></button>
  158. <span class="nav-text">3D Graphics Concepts</span>
  159. <ul class="nav-list">
  160. <li class="nav-item" data-depth="4">
  161. <a class="nav-link" href="../intermediate/multi-media_asset_pipeline.html">Multi-Media Asset Pipeline</a>
  162. </li>
  163. <li class="nav-item" data-depth="4">
  164. <a class="nav-link" href="../scenegraph_for_dummies.html">Scenegraph for Dummies</a>
  165. </li>
  166. <li class="nav-item" data-depth="4">
  167. <a class="nav-link" href="../beginner/hellovector.html">Hello Vector</a>
  168. </li>
  169. <li class="nav-item" data-depth="4">
  170. <a class="nav-link" href="../terminology.html">Terminology</a>
  171. </li>
  172. <li class="nav-item" data-depth="4">
  173. <a class="nav-link" href="../intermediate/how_to_use_materials.html">How to Use Materials</a>
  174. </li>
  175. <li class="nav-item" data-depth="4">
  176. <a class="nav-link" href="../intermediate/transparency_sorting.html">Transparency and Sorting</a>
  177. </li>
  178. <li class="nav-item" data-depth="4">
  179. <a class="nav-link" href="../external/blender.html">Importing from Blender</a>
  180. </li>
  181. <li class="nav-item" data-depth="4">
  182. <a class="nav-link" href="../external/3dsmax.html">Importing from 3DS Max</a>
  183. </li>
  184. </ul>
  185. </li>
  186. </ul>
  187. </li>
  188. </ul>
  189. </li>
  190. <li class="nav-item" data-depth="1">
  191. <a class="nav-link" href="../../logo.html">Logo Usage</a>
  192. </li>
  193. <li class="nav-item" data-depth="1">
  194. <a class="nav-link" href="../../bsd_license.html">License</a>
  195. </li>
  196. <li class="nav-item" data-depth="1">
  197. <a class="nav-link" href="../../github_tips.html">Github Tips</a>
  198. </li>
  199. </ul>
  200. </li>
  201. <li class="nav-item" data-depth="0">
  202. <button class="nav-item-toggle"></button>
  203. <span class="nav-text">SDK</span>
  204. <ul class="nav-list">
  205. <li class="nav-item" data-depth="1">
  206. <a class="nav-link" href="../../sdk.html">jMonkeyEngine SDK</a>
  207. </li>
  208. </ul>
  209. </li>
  210. </ul>
  211. </nav>
  212. </div>
  213. <div class="nav-panel-explore" data-panel="explore">
  214. <div class="context">
  215. <span class="title">Docs</span>
  216. <span class="version">master</span>
  217. </div>
  218. <ul class="components">
  219. <li class="component is-current">
  220. <span class="title">Docs</span>
  221. <ul class="versions">
  222. <li class="version is-current is-latest">
  223. <a href="../../documentation.html">master</a>
  224. </li>
  225. </ul>
  226. </li>
  227. <li class="component">
  228. <span class="title">Wiki UI</span>
  229. <ul class="versions">
  230. <li class="version is-latest">
  231. <a href="../../../wiki-ui/index.html">master</a>
  232. </li>
  233. </ul>
  234. </li>
  235. </ul>
  236. </div>
  237. </div>
  238. </aside>
  239. </div>
  240. <main class="article">
  241. <div class="toolbar" role="navigation">
  242. <button class="nav-toggle"></button>
  243. <nav class="breadcrumbs" aria-label="breadcrumbs">
  244. <ul>
  245. <li><a href="../../documentation.html">Docs</a></li>
  246. <li><a href="loading_screen.html">loading_screen</a></li>
  247. </ul>
  248. </nav>
  249. <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki/edit/master/docs/modules/ROOT/pages/jme3/advanced/loading_screen.adoc">Edit this Page</a></div>
  250. </div>
  251. <div class="content">
  252. <article class="doc">
  253. <h1 class="page">loading_screen</h1>
  254. <div class="sect1">
  255. <h2 id="nifty-loading-screen-progress-bar"><a class="anchor" href="#nifty-loading-screen-progress-bar"></a>Nifty Loading Screen (Progress Bar)</h2>
  256. <div class="sectionbody">
  257. <div class="paragraph">
  258. <p>This example will use the existing hello terrain as an example.
  259. It will require these 2 images inside Assets/Interface/ (save them as border.png and inner.png respectively).</p>
  260. </div>
  261. <div class="paragraph">
  262. <p><span class="image"><img src="../../_images/jme3/advanced/inner1.png" alt="inner1.png" width="" height=""></span></p>
  263. </div>
  264. <div class="paragraph">
  265. <p><span class="image"><img src="../../_images/jme3/advanced/border1.png" alt="border1.png" width="" height=""></span></p>
  266. </div>
  267. <div class="paragraph">
  268. <p>You need to add the jme3-niftygui and <a href="../../sdk/sample_code.html#jme3testdata-assets#" class="page">jme3-test-data</a> libraries.</p>
  269. </div>
  270. <div class="paragraph">
  271. <p>You will need to set your projects source to JDK 8.</p>
  272. </div>
  273. <div class="paragraph">
  274. <p>This is the progress bar at 90%:</p>
  275. </div>
  276. <div class="paragraph">
  277. <p><span class="image"><img src="../../_images/jme3/advanced/loadingscreen.png" alt="loadingscreen.png" width="" height=""></span></p>
  278. </div>
  279. <div class="paragraph">
  280. <p>nifty_loading.xml</p>
  281. </div>
  282. <div class="listingblock">
  283. <div class="content">
  284. <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  285. &lt;nifty&gt;
  286. &lt;useStyles filename="nifty-default-styles.xml" /&gt;
  287. &lt;useControls filename="nifty-default-controls.xml" /&gt;
  288. &lt;controlDefinition name = "loadingbar" controller = "jme3test.TestLoadingScreen"&gt;
  289. &lt;image filename="Interface/border.png" childLayout="absolute"
  290. imageMode="resize:15,2,15,15,15,2,15,2,15,2,15,15"&gt;
  291. &lt;image id="progressbar" x="0" y="0" filename="Interface/inner.png" width="32px"
  292. height="100%" imageMode="resize:15,2,15,15,15,2,15,2,15,2,15,15" /&gt;
  293. &lt;/image&gt;
  294. &lt;/controlDefinition&gt;
  295. &lt;screen id="start" controller = "jme3test.TestLoadingScreen"&gt;
  296. &lt;layer id="layer" childLayout="center"&gt;
  297. &lt;panel id = "panel2" height="30%" width="50%" align="center" valign="center"
  298. childLayout="vertical" visibleToMouse="true"&gt;
  299. &lt;control id="startGame" name="button" backgroundColor="#0000" label="Load Game"
  300. align="center"&gt;
  301. &lt;interact onClick="showLoadingMenu()" /&gt;
  302. &lt;/control&gt;
  303. &lt;/panel&gt;
  304. &lt;/layer&gt;
  305. &lt;/screen&gt;
  306. &lt;screen id="loadlevel" controller = "jme3test.TestLoadingScreen"&gt;
  307. &lt;layer id="loadinglayer" childLayout="center" backgroundColor="#000000"&gt;
  308. &lt;panel id = "loadingpanel" childLayout="vertical" align="center" valign="center"
  309. height="32px" width="70%"&gt;
  310. &lt;control name="loadingbar" align="center" valign="center" width="100%"
  311. height="100%" /&gt;
  312. &lt;control id="loadingtext" name="label" align="center"
  313. text=" "/&gt;
  314. &lt;/panel&gt;
  315. &lt;/layer&gt;
  316. &lt;/screen&gt;
  317. &lt;screen id="end" controller = "jme3test.TestLoadingScreen"&gt;
  318. &lt;/screen&gt;
  319. &lt;/nifty&gt;</code></pre>
  320. </div>
  321. </div>
  322. <div class="sect2">
  323. <h3 id="understanding-nifty-xml"><a class="anchor" href="#understanding-nifty-xml"></a>Understanding Nifty XML</h3>
  324. <div class="paragraph">
  325. <p>The progress bar and text is done statically using nifty XML.
  326. A custom control is created, which represents the progress bar.</p>
  327. </div>
  328. <div class="listingblock">
  329. <div class="content">
  330. <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;controlDefinition name = "loadingbar" controller = "jme3test.TestLoadingScreen"&gt;
  331. &lt;image filename="Interface/border.png" childLayout="absolute"
  332. imageMode="resize:15,2,15,15,15,2,15,2,15,2,15,15"&gt;
  333. &lt;image id="progressbar" x="0" y="0" filename="Interface/inner.png" width="32px"
  334. height="100%" imageMode="resize:15,2,15,15,15,2,15,2,15,2,15,15"/&gt;
  335. &lt;/image&gt;
  336. &lt;/controlDefinition&gt;</code></pre>
  337. </div>
  338. </div>
  339. <div class="paragraph">
  340. <p>This screen simply displays a button in the middle of the screen, which could be seen as a simple main menu UI.</p>
  341. </div>
  342. <div class="listingblock">
  343. <div class="content">
  344. <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;screen id="start" controller = "jme3test.TestLoadingScreen"&gt;
  345. &lt;layer id="layer" childLayout="center"&gt;
  346. &lt;panel id = "panel2" height="30%" width="50%" align="center" valign="center"
  347. childLayout="vertical" visibleToMouse="true"&gt;
  348. &lt;control id="startGame" name="button" backgroundColor="#0000" label="Load Game"
  349. align="center"&gt; &lt;interact onClick="showLoadingMenu()" /&gt;
  350. &lt;/control&gt;
  351. &lt;/panel&gt;
  352. &lt;/layer&gt;
  353. &lt;/screen&gt;</code></pre>
  354. </div>
  355. </div>
  356. <div class="paragraph">
  357. <p>This screen displays our custom progress bar control with a text control.</p>
  358. </div>
  359. <div class="listingblock">
  360. <div class="content">
  361. <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;screen id="loadlevel" controller = "jme3test.TestLoadingScreen"&gt;
  362. &lt;layer id="loadinglayer" childLayout="center" backgroundColor="#000000"&gt;
  363. &lt;panel id = "loadingpanel" childLayout="vertical" align="center" valign="center"
  364. height="32px" width="400px"&gt;
  365. &lt;control name="loadingbar" align="center" valign="center" width="400px"
  366. height="32px" /&gt;
  367. &lt;control id="loadingtext" name="label" align="center"
  368. text=" "/&gt;
  369. &lt;/panel&gt;
  370. &lt;/layer&gt;
  371. &lt;/screen&gt;</code></pre>
  372. </div>
  373. </div>
  374. </div>
  375. </div>
  376. </div>
  377. <div class="sect1">
  378. <h2 id="creating-the-bindings-to-use-the-nifty-xml"><a class="anchor" href="#creating-the-bindings-to-use-the-nifty-xml"></a>Creating the bindings to use the Nifty XML</h2>
  379. <div class="sectionbody">
  380. <div class="paragraph">
  381. <p>There are 3 main ways to update a progress bar. To understand why these methods are necessary, an understanding of the graphics pipeline is needed.</p>
  382. </div>
  383. <div class="paragraph">
  384. <p>Something like this in a single thread will not work:</p>
  385. </div>
  386. <div class="listingblock">
  387. <div class="content">
  388. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">load_scene();
  389. update_bar(30%);
  390. load_characters();
  391. update_bar(60%);
  392. load_sounds();
  393. update_bar(100%);</code></pre>
  394. </div>
  395. </div>
  396. <div class="paragraph">
  397. <p>If you do all of this in a single frame, then it is sent to the graphics card only after the whole code block has executed. By this time the bar has reached 100% and the game has already begun – for the user, the progressbar on the screen would not have visibly changed.</p>
  398. </div>
  399. <div class="paragraph">
  400. <p>The 2 main good solutions are:</p>
  401. </div>
  402. <div class="olist arabic">
  403. <ol class="arabic">
  404. <li>
  405. <p>Updating explicitly over many frames</p>
  406. </li>
  407. <li>
  408. <p>Multi-threading</p>
  409. </li>
  410. </ol>
  411. </div>
  412. <div class="sect2">
  413. <h3 id="updating-progress-bar-over-a-number-of-frames"><a class="anchor" href="#updating-progress-bar-over-a-number-of-frames"></a>Updating progress bar over a number of frames</h3>
  414. <div class="paragraph">
  415. <p>The idea is to break down the loading of the game into discrete parts.</p>
  416. </div>
  417. <div class="listingblock">
  418. <div class="content">
  419. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">package jme3test;
  420. import com.jme3.app.SimpleApplication;
  421. import com.jme3.material.Material;
  422. import com.jme3.niftygui.NiftyJmeDisplay;
  423. import static com.jme3.niftygui.NiftyJmeDisplay.newNiftyJmeDisplay;
  424. import com.jme3.renderer.Camera;
  425. import com.jme3.terrain.geomipmap.TerrainLodControl;
  426. import com.jme3.terrain.geomipmap.TerrainQuad;
  427. import com.jme3.terrain.heightmap.AbstractHeightMap;
  428. import com.jme3.terrain.heightmap.ImageBasedHeightMap;
  429. import com.jme3.texture.Texture;
  430. import com.jme3.texture.Texture.WrapMode;
  431. import de.lessvoid.nifty.Nifty;
  432. import de.lessvoid.nifty.controls.Controller;
  433. import de.lessvoid.nifty.controls.Parameters;
  434. import de.lessvoid.nifty.elements.Element;
  435. import de.lessvoid.nifty.elements.render.TextRenderer;
  436. import de.lessvoid.nifty.input.NiftyInputEvent;
  437. import de.lessvoid.nifty.screen.Screen;
  438. import de.lessvoid.nifty.screen.ScreenController;
  439. import de.lessvoid.nifty.tools.SizeValue;
  440. import java.util.ArrayList;
  441. import java.util.List;
  442. /**
  443. * This is the TestLoadingScreen Class of your Game. You should only do
  444. * initialization here. Move your Logic into AppStates or Controls
  445. *
  446. * @author normenhansen
  447. */
  448. public class TestLoadingScreen extends SimpleApplication implements
  449. ScreenController, Controller {
  450. private NiftyJmeDisplay niftyDisplay;
  451. private Nifty nifty;
  452. private Element progressBarElement;
  453. private TerrainQuad terrain;
  454. private Material mat_terrain;
  455. private float frameCount = 0;
  456. private boolean load = false;
  457. private TextRenderer textRenderer;
  458. public static void main(String[] args) {
  459. TestLoadingScreen app = new TestLoadingScreen();
  460. app.start();
  461. }
  462. @Override
  463. public void simpleInitApp() {
  464. flyCam.setEnabled(false);
  465. niftyDisplay = newNiftyJmeDisplay(assetManager,
  466. inputManager,
  467. audioRenderer,
  468. guiViewPort);
  469. nifty = niftyDisplay.getNifty();
  470. nifty.fromXml("Interface/nifty_loading.xml", "start", this);
  471. guiViewPort.addProcessor(niftyDisplay);
  472. }
  473. @Override
  474. public void simpleUpdate(float tpf) {
  475. if (load) { //loading is done over many frames
  476. if (frameCount == 1) {
  477. Element element = nifty.getScreen("loadlevel").findElementById(
  478. "loadingtext");
  479. textRenderer = element.getRenderer(TextRenderer.class);
  480. mat_terrain = new Material(assetManager,
  481. "Common/MatDefs/Terrain/Terrain.j3md");
  482. mat_terrain.setTexture("Alpha", assetManager.loadTexture(
  483. "Textures/Terrain/splat/alphamap.png"));
  484. setProgress(0.2f, "Loading grass");
  485. } else if (frameCount == 2) {
  486. Texture grass = assetManager.loadTexture(
  487. "Textures/Terrain/splat/grass.jpg");
  488. grass.setWrap(WrapMode.Repeat);
  489. mat_terrain.setTexture("Tex1", grass);
  490. mat_terrain.setFloat("Tex1Scale", 64f);
  491. setProgress(0.4f, "Loading dirt");
  492. } else if (frameCount == 3) {
  493. Texture dirt = assetManager.loadTexture(
  494. "Textures/Terrain/splat/dirt.jpg");
  495. dirt.setWrap(WrapMode.Repeat);
  496. mat_terrain.setTexture("Tex2", dirt);
  497. mat_terrain.setFloat("Tex2Scale", 32f);
  498. setProgress(0.5f, "Loading rocks");
  499. } else if (frameCount == 4) {
  500. Texture rock = assetManager.loadTexture(
  501. "Textures/Terrain/splat/road.jpg");
  502. rock.setWrap(WrapMode.Repeat);
  503. mat_terrain.setTexture("Tex3", rock);
  504. mat_terrain.setFloat("Tex3Scale", 128f);
  505. setProgress(0.6f, "Creating terrain");
  506. } else if (frameCount == 5) {
  507. AbstractHeightMap heightmap = null;
  508. Texture heightMapImage = assetManager.loadTexture(
  509. "Textures/Terrain/splat/mountains512.png");
  510. heightmap = new ImageBasedHeightMap(heightMapImage.getImage());
  511. heightmap.load();
  512. terrain = new TerrainQuad("my terrain", 65, 513, heightmap.
  513. getHeightMap());
  514. setProgress(0.8f, "Positioning terrain");
  515. } else if (frameCount == 6) {
  516. terrain.setMaterial(mat_terrain);
  517. terrain.setLocalTranslation(0, -100, 0);
  518. terrain.setLocalScale(2f, 1f, 2f);
  519. rootNode.attachChild(terrain);
  520. setProgress(0.9f, "Loading cameras");
  521. } else if (frameCount == 7) {
  522. List&lt;Camera&gt; cameras = new ArrayList&lt;&gt;();
  523. cameras.add(getCamera());
  524. TerrainLodControl control = new TerrainLodControl(terrain,
  525. cameras);
  526. terrain.addControl(control);
  527. setProgress(1f, "Loading complete");
  528. } else if (frameCount == 8) {
  529. nifty.gotoScreen("end");
  530. nifty.exit();
  531. guiViewPort.removeProcessor(niftyDisplay);
  532. flyCam.setEnabled(true);
  533. flyCam.setMoveSpeed(50);
  534. }
  535. frameCount++;
  536. }
  537. }
  538. public void setProgress(final float progress, String loadingText) {
  539. final int MIN_WIDTH = 32;
  540. int pixelWidth = (int) (MIN_WIDTH + (progressBarElement.getParent().
  541. getWidth() - MIN_WIDTH) * progress);
  542. progressBarElement.setConstraintWidth(new SizeValue(pixelWidth + "px"));
  543. progressBarElement.getParent().layoutElements();
  544. textRenderer.setText(loadingText);
  545. }
  546. public void showLoadingMenu() {
  547. nifty.gotoScreen("loadlevel");
  548. load = true;
  549. }
  550. @Override
  551. public void onStartScreen() {
  552. }
  553. @Override
  554. public void onEndScreen() {
  555. }
  556. @Override
  557. public void bind(Nifty nifty, Screen screen) {
  558. progressBarElement = nifty.getScreen("loadlevel").findElementById(
  559. "progressbar");
  560. }
  561. // methods for Controller
  562. @Override
  563. public boolean inputEvent(final NiftyInputEvent inputEvent) {
  564. return false;
  565. }
  566. @Override
  567. public void onFocus(boolean getFocus) {
  568. }
  569. @Override
  570. public void bind(Nifty nifty, Screen screen, Element elmnt,
  571. Parameters prmtrs) {
  572. progressBarElement = elmnt.findElementById("progressbar");
  573. }
  574. @Override
  575. public void init(Parameters prmtrs) {
  576. }
  577. }</code></pre>
  578. </div>
  579. </div>
  580. <div class="admonitionblock note">
  581. <table>
  582. <tr>
  583. <td class="icon">
  584. <i class="fa icon-note" title="Note"></i>
  585. </td>
  586. <td class="content">
  587. Try and add all controls near the end, as their update loops may begin executing.
  588. </td>
  589. </tr>
  590. </table>
  591. </div>
  592. </div>
  593. <div class="sect2">
  594. <h3 id="using-multithreading"><a class="anchor" href="#using-multithreading"></a>Using multithreading</h3>
  595. <div class="paragraph">
  596. <p>For more info on multithreading: <a href="multithreading.html" class="page">The jME3 Threading Model</a></p>
  597. </div>
  598. <div class="paragraph">
  599. <p>Make sure to change the XML file to point the controller to TestLoadingScreen*1*.</p>
  600. </div>
  601. <div class="listingblock">
  602. <div class="content">
  603. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">package jme3test;
  604. import com.jme3.app.SimpleApplication;
  605. import com.jme3.material.Material;
  606. import com.jme3.niftygui.NiftyJmeDisplay;
  607. import static com.jme3.niftygui.NiftyJmeDisplay.newNiftyJmeDisplay;
  608. import com.jme3.renderer.Camera;
  609. import com.jme3.terrain.geomipmap.TerrainLodControl;
  610. import com.jme3.terrain.geomipmap.TerrainQuad;
  611. import com.jme3.terrain.heightmap.AbstractHeightMap;
  612. import com.jme3.terrain.heightmap.ImageBasedHeightMap;
  613. import com.jme3.texture.Texture;
  614. import com.jme3.texture.Texture.WrapMode;
  615. import de.lessvoid.nifty.Nifty;
  616. import de.lessvoid.nifty.controls.Controller;
  617. import de.lessvoid.nifty.controls.Parameters;
  618. import de.lessvoid.nifty.elements.Element;
  619. import de.lessvoid.nifty.elements.render.TextRenderer;
  620. import de.lessvoid.nifty.input.NiftyInputEvent;
  621. import de.lessvoid.nifty.screen.Screen;
  622. import de.lessvoid.nifty.screen.ScreenController;
  623. import de.lessvoid.nifty.tools.SizeValue;
  624. import java.util.ArrayList;
  625. import java.util.List;
  626. import java.util.concurrent.Callable;
  627. import java.util.concurrent.ExecutorService;
  628. import java.util.concurrent.Executors;
  629. import java.util.concurrent.Future;
  630. import java.util.concurrent.ScheduledExecutorService;
  631. import java.util.concurrent.TimeUnit;
  632. import java.util.logging.Level;
  633. import java.util.logging.Logger;
  634. public class TestLoadingScreen1 extends SimpleApplication implements
  635. ScreenController, Controller {
  636. private NiftyJmeDisplay niftyDisplay;
  637. private Nifty nifty;
  638. private Element progressBarElement;
  639. private TerrainQuad terrain;
  640. private Material mat_terrain;
  641. private boolean load = false;
  642. private ScheduledExecutorService exec = Executors.newScheduledThreadPool(2);
  643. private Future loadFuture = null;
  644. private TextRenderer textRenderer;
  645. private static final Logger LOG = Logger.getLogger(TestLoadingScreen1.class.
  646. getName());
  647. public static void main(String[] args) {
  648. TestLoadingScreen1 app = new TestLoadingScreen1();
  649. app.start();
  650. }
  651. @Override
  652. public void simpleInitApp() {
  653. flyCam.setEnabled(false);
  654. niftyDisplay = newNiftyJmeDisplay(assetManager,
  655. inputManager,
  656. audioRenderer,
  657. guiViewPort);
  658. nifty = niftyDisplay.getNifty();
  659. nifty.fromXml("Interface/nifty_loading.xml", "start", this);
  660. guiViewPort.addProcessor(niftyDisplay);
  661. }
  662. @Override
  663. public void simpleUpdate(float tpf) {
  664. if (load) {
  665. if (loadFuture == null) {
  666. //if we have not started loading, submit Callable to executor
  667. loadFuture = exec.submit(loadingCallable);
  668. }
  669. //check if the execution on the other thread is done
  670. if (loadFuture.isDone()) {
  671. //these calls have to be done on the update loop thread,
  672. //especially attaching the terrain to the rootNode
  673. //after it is attached, it's managed by the update loop thread
  674. // and may not be modified from any other thread anymore!
  675. nifty.gotoScreen("end");
  676. nifty.exit();
  677. guiViewPort.removeProcessor(niftyDisplay);
  678. flyCam.setEnabled(true);
  679. flyCam.setMoveSpeed(50);
  680. rootNode.attachChild(terrain);
  681. load = false;
  682. }
  683. }
  684. }
  685. //This is the callable that contains the code that is run on the other
  686. //thread.
  687. //Since the assetmananger is threadsafe, it can be used to load data from
  688. //any thread.
  689. //We do *not* attach the objects to the rootNode here!
  690. Callable&lt;Void&gt; loadingCallable = new Callable&lt;Void&gt;() {
  691. @Override
  692. public Void call() {
  693. Element element = nifty.getScreen("loadlevel").findElementById(
  694. "loadingtext");
  695. textRenderer = element.getRenderer(TextRenderer.class);
  696. mat_terrain = new Material(assetManager,
  697. "Common/MatDefs/Terrain/Terrain.j3md");
  698. mat_terrain.setTexture("Alpha", assetManager.loadTexture(
  699. "Textures/Terrain/splat/alphamap.png"));
  700. //setProgress is thread safe (see below)
  701. setProgress(0.2f, "Loading grass");
  702. Texture grass = assetManager.loadTexture(
  703. "Textures/Terrain/splat/grass.jpg");
  704. grass.setWrap(WrapMode.Repeat);
  705. mat_terrain.setTexture("Tex1", grass);
  706. mat_terrain.setFloat("Tex1Scale", 64f);
  707. setProgress(0.4f, "Loading dirt");
  708. Texture dirt = assetManager.loadTexture(
  709. "Textures/Terrain/splat/dirt.jpg");
  710. dirt.setWrap(WrapMode.Repeat);
  711. mat_terrain.setTexture("Tex2", dirt);
  712. mat_terrain.setFloat("Tex2Scale", 32f);
  713. setProgress(0.5f, "Loading rocks");
  714. Texture rock = assetManager.loadTexture(
  715. "Textures/Terrain/splat/road.jpg");
  716. rock.setWrap(WrapMode.Repeat);
  717. mat_terrain.setTexture("Tex3", rock);
  718. mat_terrain.setFloat("Tex3Scale", 128f);
  719. setProgress(0.6f, "Creating terrain");
  720. AbstractHeightMap heightmap = null;
  721. Texture heightMapImage = assetManager.loadTexture(
  722. "Textures/Terrain/splat/mountains512.png");
  723. heightmap = new ImageBasedHeightMap(heightMapImage.getImage());
  724. heightmap.load();
  725. terrain = new TerrainQuad("my terrain", 65, 513, heightmap.
  726. getHeightMap());
  727. setProgress(0.8f, "Positioning terrain");
  728. terrain.setMaterial(mat_terrain);
  729. terrain.setLocalTranslation(0, -100, 0);
  730. terrain.setLocalScale(2f, 1f, 2f);
  731. setProgress(0.9f, "Loading cameras");
  732. List&lt;Camera&gt; cameras = new ArrayList&lt;&gt;();
  733. cameras.add(getCamera());
  734. TerrainLodControl control = new TerrainLodControl(terrain, cameras);
  735. terrain.addControl(control);
  736. setProgress(1f, "Loading complete");
  737. return null;
  738. }
  739. };
  740. public void setProgress(final float progress, final String loadingText) {
  741. //Since this method is called from another thread, we enqueue the
  742. //changes to the progressbar to the update loop thread.
  743. enqueue(() -&gt; {
  744. final int MIN_WIDTH = 32;
  745. int pixelWidth = (int) (MIN_WIDTH + (progressBarElement.getParent().
  746. getWidth() - MIN_WIDTH) * progress);
  747. progressBarElement.setConstraintWidth(new SizeValue(pixelWidth
  748. + "px"));
  749. progressBarElement.getParent().layoutElements();
  750. textRenderer.setText(loadingText);
  751. return null;
  752. });
  753. }
  754. public void showLoadingMenu() {
  755. nifty.gotoScreen("loadlevel");
  756. load = true;
  757. }
  758. @Override
  759. public void onStartScreen() {
  760. }
  761. @Override
  762. public void onEndScreen() {
  763. }
  764. @Override
  765. public void bind(Nifty nifty, Screen screen) {
  766. progressBarElement = nifty.getScreen("loadlevel").findElementById(
  767. "progressbar");
  768. }
  769. // methods for Controller
  770. @Override
  771. public boolean inputEvent(final NiftyInputEvent inputEvent) {
  772. return false;
  773. }
  774. @Override
  775. public void onFocus(boolean getFocus) {
  776. }
  777. @Override
  778. public void destroy() {
  779. super.destroy();
  780. shutdownAndAwaitTermination(exec);
  781. }
  782. //standard shutdown process for executor
  783. private void shutdownAndAwaitTermination(ExecutorService pool) {
  784. pool.shutdown(); // Disable new tasks from being submitted
  785. try {
  786. // Wait a while for existing tasks to terminate
  787. if (!pool.awaitTermination(6, TimeUnit.SECONDS)) {
  788. pool.shutdownNow(); // Cancel currently executing tasks
  789. // Wait a while for tasks to respond to being cancelled
  790. if (!pool.awaitTermination(6, TimeUnit.SECONDS)) {
  791. LOG.log(Level.SEVERE, "Pool did not terminate {0}", pool);
  792. }
  793. }
  794. } catch (InterruptedException ie) {
  795. // (Re-)Cancel if current thread also interrupted
  796. pool.shutdownNow();
  797. // Preserve interrupt status
  798. Thread.currentThread().interrupt();
  799. }
  800. }
  801. @Override
  802. public void bind(Nifty nifty, Screen screen, Element elmnt,
  803. Parameters prmtrs) {
  804. progressBarElement = elmnt.findElementById("progressbar");
  805. }
  806. @Override
  807. public void init(Parameters prmtrs) {
  808. }
  809. }</code></pre>
  810. </div>
  811. </div>
  812. </div>
  813. </div>
  814. </div>
  815. </article>
  816. <aside class="toc sidebar" data-title="Contents" data-levels="2">
  817. <div class="toc-menu"></div>
  818. </aside>
  819. </div>
  820. </main>
  821. </div>
  822. <footer class="footer">
  823. <p>Copyright 2020 jMonkeyEngine Wiki Contributors. Licensed BSD-3.</p>
  824. </footer>
  825. <script src="../../../_/js/site.js"></script>
  826. <script async src="../../../_/js/vendor/highlight.js"></script>
  827. </body>
  828. </html>