Page 1 of 2
[solved] Reversi tutorial. First step: board image isn't displayed.
Posted: 26 December 2019, 11:22
by tanza
Hi,
I'm a beginner with BGA studio.
I try to do the Reversi tutorial.
I did the first step to display the board image.
When I start the game, I have no error, only a warning for game artist.
But the board isn't displayed.
What should I do?
Thanks for your help.
Re: Reversi tutorial. First step: board image isn't displayed.
Posted: 26 December 2019, 15:53
by A-dam
Hi,
welcome to studio! There is lot of things which can be wrong. I would start following this:
- try clear your browser cache (for example ctrl+F5)
- is the board dom element present? - try investigate with browser developer tool
- if so, did you update your css file properly?
- if not something is wrong with placement - is your tpl updated correctly? is view.php ok? is your js file set up properly?
without specifying the problem, it is hard to guess where exactly is your problem, but this is at least something where you can start looking..
Re: Reversi tutorial. First step: board image isn't displayed.
Posted: 26 December 2019, 16:40
by tanza
A-dam wrote: ↑26 December 2019, 15:53
Hi,
welcome to studio! There is lot of things which can be wrong. I would start following this:
- try clear your browser cache (for example ctrl+F5)
- is the board dom element present? - try investigate with browser developer tool
- if so, did you update your css file properly?
- if not something is wrong with placement - is your tpl updated correctly? is view.php ok? is your js file set up properly?
without specifying the problem, it is hard to guess where exactly is your problem, but this is at least something where you can start looking..
I cleared my browser cache.
And tried on a computer and smartphone.
What's the board dom element?
Nothing is said about it in the tutorial.
I updated my css file.
What do you mean by updating my tpl correctly?
What about view.php and js files? Nothing is said in the tutorial about view.php and js files in the first step, where only the board must be displayed.
I did what is said in the first step of the Reversi tutorial.
https://en.studio.boardgamearena.com/do ... l_reversi
I copied the few code lines in the tpl and css files.
and
Code: Select all
#board {
width: 536px;
height: 528px;
background-image: url('img/board.jpg');
}
I called the css tutorialmyname.css (instead of reversi.css) and uploaded the files with ftp: tpl, css and jpg.
Re: Reversi tutorial. First step: board image isn't displayed.
Posted: 26 December 2019, 17:43
by A-dam
If you want to programm web pages you need to know what is dom element, try
https://www.w3schools.com/jsref/dom_obj_all.asp
You need to investigate what is wrong, open developer tool (depends on browser you use, for example ctrl+shift+c) and you will see the whole structure of the webpage, if you can find your div "board " tag than something wrong must be with your css, if you dont see div element at all than it is most probably your tpl wich is wrong.
Re: Reversi tutorial. First step: board image isn't displayed.
Posted: 26 December 2019, 19:06
by tanza
A-dam wrote: ↑26 December 2019, 17:43
If you want to programm web pages you need to know what is dom element, try
https://www.w3schools.com/jsref/dom_obj_all.asp
You need to investigate what is wrong, open developer tool (depends on browser you use, for example ctrl+shift+c) and you will see the whole structure of the webpage, if you can find your div "board " tag than something wrong must be with your css, if you dont see div element at all than it is most probably your tpl wich is wrong.
I open the developer tool to see the html page.
There's no board element.
Here is the tpl file
Code: Select all
{OVERALL_GAME_HEADER}
<div id="board">
</div>
<script type="text/javascript">
</script>
{OVERALL_GAME_FOOTER}
Please tell me what's wrong.
Re: Reversi tutorial. First step: board image isn't displayed.
Posted: 26 December 2019, 20:44
by A-dam
Well your code looks OK, it is hard to tell without seeing all.. Only way I can help you is, if you tick "Allow other studio developers to get readonly access to this project source code (checked by default)" on control panel page. Than I can have a look to whole project...
Re: Reversi tutorial. First step: board image isn't displayed.
Posted: 26 December 2019, 20:50
by tanza
A-dam wrote: ↑26 December 2019, 20:44
Well your code looks OK, it is hard to tell without seeing all.. Only way I can help you is, if you tick "Allow other studio developers to get readonly access to this project source code (checked by default)" on control panel page. Than I can have a look to whole project...
Done.
Re: Reversi tutorial. First step: board image isn't displayed.
Posted: 26 December 2019, 21:15
by A-dam
you are missing import line in your css file
@import url(../../../css/csslayer.css); /* Note: you must not use any @import directive other than this one */
this is quite important... And by the way, your board was on the page, you just did not find it in developer tool...
Re: Reversi tutorial. First step: board image isn't displayed.
Posted: 26 December 2019, 21:54
by tanza
A-dam wrote: ↑26 December 2019, 21:15
you are missing import line in your css file
@import url(../../../css/csslayer.css); /* Note: you must not use any @import directive other than this one */
this is quite important...
Thanks.
But the result is the same. Nothing is displayed.
Re: Reversi tutorial. First step: board image isn't displayed.
Posted: 26 December 2019, 22:12
by A-dam
Did you upload css file with the import line added? Did you clear your cash?