# Remember 'setTexture' checkbox choices? **URL:** \ **Category:** Phaser 3\ **Created:** [January 16, 2020, 8:50pm UTC](https://phaser.discourse.group/t/remember-settexture-checkbox-choices/4907 "2020-01-16T20:50:48Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![Thundros](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thundros/32/2057_2.png) [@Thundros](https://phaser.discourse.group/u/Thundros)\ **Post date:** [January 16, 2020, 8:50pm UTC](https://phaser.discourse.group/t/remember-settexture-checkbox-choices/4907/1 "2020-01-16T20:50:48Z")
so i’m trying to get my options menu to remember which boxes were checkmarked. so, when i click on a `'setTexture'` checkbox, how, after I leave the options menu & come back or go to the next option page & come back, how can I make the game remember which boxes were checkmarked? Any help as always, is GREATLY appreciated! 🙂 Thank You! ---
**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\ **Post date:** [January 16, 2020, 9:13pm UTC](https://phaser.discourse.group/t/remember-settexture-checkbox-choices/4907/2 "2020-01-16T21:13:32Z")
If you sleep and wake the scenes, I think that will be unnecessary. But if you start and stop the scenes, maybe use [this.registry](https://photonstorm.github.io/phaser3-docs/Phaser.Scene.html#registry). ---
**Author:** ![Thundros](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thundros/32/2057_2.png) [@Thundros](https://phaser.discourse.group/u/Thundros)\ **Post date:** [January 16, 2020, 9:21pm UTC](https://phaser.discourse.group/t/remember-settexture-checkbox-choices/4907/3 "2020-01-16T21:21:59Z")
@samme : how would i use this with `'this.scene.start ( )'` ? ---
**Author:** ![Thundros](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thundros/32/2057_2.png) [@Thundros](https://phaser.discourse.group/u/Thundros)\ **Post date:** [January 17, 2020, 7:38pm UTC](https://phaser.discourse.group/t/remember-settexture-checkbox-choices/4907/4 "2020-01-17T19:38:52Z")
When clicking the `'Options'` button on the title screen, what is keeping `'Option 1'`, `'Option 2'`, `'Option 3'`, & `'Option 4'` from remembering that these checkboxes are checkmarked, but `'Sound Enabled'` & `'Music Enabled'` remembers which checkboxes are checkmarked just fine? I want to create my own variable IN `'Model.js'` for EVERY single option in order to save the checkbox data by using ES6’ `'get'` & `'set'` if that makes sense. I am trying to make the following function work with ANY option{s} : ```javascript updateOptions : function ( ) { if ( this.model.musicOn === false ) { this.__musicButton.setTexture ( 'box' ); this.sys.game.globals.sound.stop ( ); this.model.bgMusicPlaying = false; } else { this.__musicButton.setTexture ( 'checkedBox' ); if ( this.model.bgMusicPlaying === false ) { this.sys.game.globals.sound.play ( ); this.model.bgMusicPlaying = true; } } if ( this.model.soundOn === false ) { this.__soundButton.setTexture ( 'box' ); } else { this.__soundButton.setTexture ( 'checkedBox' ); } }, ``` how can i make the `'Option 1'`, `'Option 2'`, `'Option 3'` & `'Option 4'` checkboxes work like the `'Sound Enabled'` & `'Music Enabled'` checkboxes? the above function is a modification of `'updateAudio ( )'` function. i want to remove all the audio references, but keep the checkbox references in order to allow for ALL options to be remembered via the `'Model.js'` file [https://thundros.github.io/menu-system-doosan/](https://thundros.github.io/menu-system-doosan/) Source for `'OptionsScene.js'` : [https://thundros.github.io/menu-system-doosan/src/Scenes/OptionsScene.js](https://thundros.github.io/menu-system-doosan/src/Scenes/OptionsScene.js) It has something to do with `'Model.js'` : [https://thundros.github.io/menu-system-doosan/src/Model.js](https://thundros.github.io/menu-system-doosan/src/Model.js) & is based on this tutorial : > **[Creating a Phaser 3 Template – Part 3](https://phasertutorials.com/creating-a-phaser-3-template-part-3/)** > > In Part 1 and Part 2 of this tutorial, we continued building a Phaser project template that you can reuse and extend in any future project you work on. In the first two parts we:created the ba Any help as always, is EXTREMELY appreciated! Thank You! ---
**Author:** ![ldd](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@ldd](https://phaser.discourse.group/u/ldd)\ **Post date:** [January 17, 2020, 8:57pm UTC](https://phaser.discourse.group/t/remember-settexture-checkbox-choices/4907/5 "2020-01-17T20:57:26Z")
I think you have most functionality there. Use [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to persist things across refreshes, etc. Something like `localStorage.setItem("settings", JSON.stringify(this.sys.game.globals.model))` and `JSON.parse(localStorage.getItem("settings"))` ---
**Author:** ![Thundros](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thundros/32/2057_2.png) [@Thundros](https://phaser.discourse.group/u/Thundros)\ **Post date:** [January 17, 2020, 9:04pm UTC](https://phaser.discourse.group/t/remember-settexture-checkbox-choices/4907/6 "2020-01-17T21:04:50Z")
@ldd : But `'Model.js'` is already doing what I want it to. It’s just not doing it to the other options in the other parts of the menu. 🙂 ---
**Author:** ![ldd](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@ldd](https://phaser.discourse.group/u/ldd)\ **Post date:** [January 17, 2020, 9:44pm UTC](https://phaser.discourse.group/t/remember-settexture-checkbox-choices/4907/7 "2020-01-17T21:44:20Z")
> `this.model.optionOn` instead of `this.model.soundOn` otherwise you are using the wrong value from `this.model`. On the other hand, you should really consider using [prettier](https://prettier.io/) ---
**Author:** ![Thundros](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thundros/32/2057_2.png) [@Thundros](https://phaser.discourse.group/u/Thundros)\ **Post date:** [January 17, 2020, 9:54pm UTC](https://phaser.discourse.group/t/remember-settexture-checkbox-choices/4907/8 "2020-01-17T21:54:08Z")
@ldd : You misinterpret what I need to do. I simply need the OTHER options ( NOT `'Sound Enabled'` & `'Music Enabled'` ) to save their values with `'Model.js''` ES6 `'get ( )'` & `'set ( )'` methods. this is still not working : ```javascript class Model { constructor ( ) { this._soundOn = true; this._musicOn = true; this._optionOn = true; this._bgMusicPlaying = false; } set musicOn ( value ) { this._musicOn = value; } get musicOn ( ) { return this._musicOn; } set soundOn ( value ) { this._soundOn = value; } get soundOn ( ) { return this._soundOn; } set bgMusicPlaying ( value ) { this._bgMusicPlaying = value; } get bgMusicPlaying ( ) { return this._bgMusicPlaying; } set optionOn ( value ) { this._optionOn = value; } get optionOn ( ) { return this._optionOn; } } ``` ```javascript updateOptions : function ( __opt ) { this. __opt =__ opt; if ( this.model.optionOn === false ) { this.__opt.setTexture ( 'box' ); this.model.optionOn = false; } else { this.__opt.setTexture ( 'checkedBox' ); this.model.optionOn = true; } }, ``` ```javascript this.__Option [0].on ( 'pointerdown', function ( ) { // this.__Option [0].setTexture ( 'checkedBox' ); // this.__Option [0].setTexture ( 'box' ); // this. __on1 = ! this.__ on1; // this.__ActivateAction ( this.__Option [0], this.__on1 ); this.model.optionOn = ( ! ( this.model.optionOn ) ); this.updateOptions ( this.__Option [0] ); }.bind ( this ) ); this.__Option [1].on ( 'pointerdown', function ( ) { // this.__Option [1].setTexture ( 'checkedBox' ); // this.__Option [1].setTexture ( 'box' ); // this. __on2 = ! this.__ on2; // this.__ActivateAction ( this.__Option [1], this.__on2 ); this.model.optionOn = ( ! ( this.model.optionOn ) ); this.updateOptions ( this.__Option [1] ); }.bind ( this ) ); ``` What am I doing wrong here?? ---
**Author:** ![ldd](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@ldd](https://phaser.discourse.group/u/ldd)\ **Post date:** [January 18, 2020, 1:11am UTC](https://phaser.discourse.group/t/remember-settexture-checkbox-choices/4907/9 "2020-01-18T01:11:47Z")
In order to get one Button fixed, this is the diff necessary: ```javascript --- a/src/Scenes/key1.js +++ b/src/Scenes/key1.js @@ -180,14 +180,14 @@ if ( this.model.optionOn === false ) { - this.__opt.setTexture ( 'box' ); + this.__Option [0].setTexture ( 'box' ); this.model.optionOn = false; } if ( this.model.optionOn === true ) { - this.__opt.setTexture ( 'checkedBox' ); + this.__Option [0].setTexture ( 'checkedBox' ); this.model.optionOn = true; } @@ -481,7 +481,7 @@ */ - // this.updateAudio ( ); + this.updateOptions ( ); }, ``` ---
**Author:** ![ldd](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@ldd](https://phaser.discourse.group/u/ldd)\ **Post date:** [January 18, 2020, 1:25am UTC](https://phaser.discourse.group/t/remember-settexture-checkbox-choices/4907/10 "2020-01-18T01:25:28Z")
Now, since you want multiple options you need multiple setters and getters and you are going to manually add them to the Model class. I personally think that your Model class is not maintainable, and what you really want is ```javascript model = { options: [ {label: "cool option1", value: false}, {label: "cool option2", value: false}, {label: "cool option3", value: false}, {label: "cool option4", value: false}, ] } ``` then, using just this.\_\_Option[0] and this.\_\_Option[1] set and get values to our new model. The arrow buttons should change the starting index that you use, and presto! your menu works. It would probably be a good idea to keep all of that in one Scene though. I don’t really see why you need 3. ---
**Author:** ![Thundros](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thundros/32/2057_2.png) [@Thundros](https://phaser.discourse.group/u/Thundros)\ **Post date:** [January 18, 2020, 2:07am UTC](https://phaser.discourse.group/t/remember-settexture-checkbox-choices/4907/11 "2020-01-18T02:07:01Z")
@ldd : how would you keep it all in 1 scene? ---
**Author:** ![ldd](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@ldd](https://phaser.discourse.group/u/ldd)\ **Post date:** [January 18, 2020, 2:39am UTC](https://phaser.discourse.group/t/remember-settexture-checkbox-choices/4907/12 "2020-01-18T02:39:38Z")
based on the code you already have, and my suggested new Model: ```javascript this.updateOptions (__OPTIONS_CURR_PAGE_COUNT); ``` ```javascript function updateOptions(page){ if (this.model.options[page * 2].value) this.__Option[0].setTexture ( 'box' ); else this.__Option[0].setTexture ( 'checkedBox' ); if (this.model.options[page * 2 + 1].value) this.__Option[1].setTexture ( 'box' ); else this.__Option[1].setTexture ( 'checkedBox' ); } ``` and then ```javascript this.__musicButton.on ( 'pointerdown', function ( ) { this.model.options[CURR_PAGE * 2].value = ( ! ( this.model.options[CURR_PAGE * 2].value ) ); }.bind ( this ) ); ``` etc, etc. Basically use the current page to calculate whether you are modifying indexes 0 and 1 or 1 and 2 (etc) in `model.options` on top of that, you’d probably want to use the labels that I’ve defined and change those too, and test things out a little bit. ( you may need to call updateOptions on page change, for example.) But besides that, one scene is enough. ---
**Author:** ![Thundros](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thundros/32/2057_2.png) [@Thundros](https://phaser.discourse.group/u/Thundros)\ **Post date:** [January 18, 2020, 9:56pm UTC](https://phaser.discourse.group/t/remember-settexture-checkbox-choices/4907/13 "2020-01-18T21:56:04Z")
@ldd : it’s still not working. what am I doing wrong here? : Direct link to demo : [https://thundros.github.io/menu-system-doosan/](https://thundros.github.io/menu-system-doosan/) Direct link to `'key1.js'` : [https://thundros.github.io/menu-system-doosan/src/Scene/key1.js](https://thundros.github.io/menu-system-doosan/src/Scene/key1.js) My goal isn’t to click on `'this. __musicButton'` & `'this.__ soundButton'`, those work. My goal is to click on `'Option 1'`, `'Option 2'`, `'Option 3'` & `'Option 4'` Inside `'key1.js'` : Line{s} 177 - 194 : ```javascript updateOptions : function ( __page ) { this. __page =__ page; if ( this.model.options [this.__page * 2].value ) { this.__Option [0].setTexture ( 'box' ); }- else { this.__Option [0].setTexture ( 'checkedBox' ); } if ( this.model.options [this.__page * 2 + 1].value ) { this.__Option [1].setTexture ( 'box' ); } else { this.__Option [1].setTexture ( 'checkedBox' ); } }, ``` Line{s} 400 - 406 :: ```javascript this.__Option [0].on ( 'pointerdown', function ( ) { this.updateOptions ( __OPTIONS_CURR_PAGE_COUNT ); }.bind ( this ) ); this.__Option [1].on ( 'pointerdown', function ( ) { this.updateOptions ( __OPTIONS_CURR_PAGE_COUNT ); }.bind ( this ) ); ``` ---
**Author:** ![Thundros](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thundros/32/2057_2.png) [@Thundros](https://phaser.discourse.group/u/Thundros)\ **Post date:** [January 20, 2020, 5:50pm UTC](https://phaser.discourse.group/t/remember-settexture-checkbox-choices/4907/14 "2020-01-20T17:50:38Z")
someone can help? ---
**Author:** ![Thundros](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thundros/32/2057_2.png) [@Thundros](https://phaser.discourse.group/u/Thundros)\ **Post date:** [January 22, 2020, 12:45am UTC](https://phaser.discourse.group/t/remember-settexture-checkbox-choices/4907/15 "2020-01-22T00:45:01Z")
? ☹ ---
**Author:** ![Thundros](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thundros/32/2057_2.png) [@Thundros](https://phaser.discourse.group/u/Thundros)\ **Post date:** [January 22, 2020, 4:53pm UTC](https://phaser.discourse.group/t/remember-settexture-checkbox-choices/4907/16 "2020-01-22T16:53:21Z")
Getting tired of being ignored. ☹