vastron

Members
  • Content Count

    14
  • Joined

  • Last visited

  1. vastron

    Icon fonts support

    Guys I did not get this to work, can you please help me? This is my code: <link rel="stylesheet" href="lib/fontawesome-free-5.0.13/web-fonts-with-css/css/fontawesome-all.min.css" /> <script src="lib/phaser.js"></script> <script src="scripts/game.js"></script> this.computer = this.add.text(100, 100, '\uf108 ', { fill: '#4286f4', font: '30px FontAwesome' }); console.log(this.computer.text); All I get is this :
  2. vastron

    Cross word

    Another crossword puzzle published in Issue 120 of Phaser World, http://phaser.io/news/2018/04/crossword-scape
  3. vastron

    Cross word

    @GSB Take a look at this tutorial. https://www.joshmorony.com/part-2-building-a-word-search-game-in-html5-with-phaser/ It is a very good game but to my understanding it does not place specific words in the grid. It randomly places letters from the alphabet in the grid and if the player finds a word, it checks if such a word exists in a text file that is loaded to the game.
  4. vastron

    Cross word puzzle

    @GSB Take a look at this tutorial. https://www.joshmorony.com/part-2-building-a-word-search-game-in-html5-with-phaser/ It is a very good game but to my understanding it does not place specific words in the grid. It randomly places letters from the alphabet in the grid and if the player finds a word, it checks if such a word exists in a text file that is loaded to the game.
  5. vastron

    Scaling and input fields

    in my case it worked like this: in html i do this : <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, width=device-width" /> in css, this: * { padding: 0; margin: 0; } and in phaser i do this game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true;
  6. I ended up creating a modal and styled it like this. My game is inside the #canvasWrapper. It now looks ok with the game scaling! <style> body { background-color: black; box-sizing: border-box; } * { padding: 0; margin: 0; } #canvasWrapper { width: 99vw; height: 99vh; margin: 0 auto; } .modal.in { display: flex !important; } .modal .modal-dialog { margin: auto; } h4 { text-align: center; } .fa-undo-alt, .fa-check { display: none; } .modal-dialog { z-index: 50000; } @media screen and (orientation: portrait) { body.modal-open { position: fixed; } } </style>
  7. Thank you, I tried it, but it seems I cannot escape media queries, so I am thinking of using the bootstrap modal for my form.
  8. Hi guys, I have created some input fields in the DOM and I place them above my phaser game with css. In my game I use game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; so I use media queries to control the position of the input fields. I do it like this => #inputs { position: absolute; top: 30%; left: 40%; width:100%; } @media only screen and (max-width: 560px) { #inputs{ top: 35%; left: 20%; transform: scale(0.8,0.8); } } But it is almost impossible to follow the Phaser scaling!If you have any tips, please share!
  9. vastron

    Sprite flickering

    These two have worked for me. Try setting up a max velocity (sprite.body.maxVelocity.x = 300), if flickering persists try enabling the game in Phaser.CANVAS mode , not Phaser.AUTO.
  10. vastron

    HTML text input within Phaser canvas

    It is a great plugin but unfortunately it does not work on mobiles. Edit!!!!!!!!!!!!! It does if you put <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, width=device-width" /> on your html file.
  11. Hi guys, does this work on mobile devices?
  12. vastron

    [Plugin] phaser-input

    It works if you put this meta tag <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, width=device-width" /> on your html file!
  13. vastron

    space invaders example : little bug

    thank you very much for this!
  14. Hello everyone. The problem is I want to immediately display the loading screen. I don't want to see a black screen before the loading screen.I followed the example shown in phaser.io, http://examples.phaser.io/_site/view_full.html?d=loader&f=load+events.js&t=load events, but the loading progress always remains at 0. I can't figure out what the problem is. Can you help me? my boot state looks like this init: function () { game.stage.backgroundColor = "#012358"; game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; }, preload: function () { atlas = game.load.atlas('mysprites', 'im/sprites.png', 'im/spritesJson.json'); game.load.spritesheet('anim', 'im/myloaderSheet.png', (animationFrameWidth + spaceBetweenFrames), animationFrameHeight, 30); }, create: function () { game.state.start('Loading'); } and my loading state looks like this preload: function () { game.load.json('txts', 'scripts/text.json'); game.load.script('webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js'); game.load.start(); }, create: function () { myTxts = game.cache.getJSON('txts'); bg = game.add.tileSprite(0, 0, 1280, 720, 'mysprites'); bg.frameName = "bg"; animation = game.add.sprite((game.world.centerX - 25), (game.world.centerY - 50), 'animation'); loadingBar = new Phaser.Rectangle(game.world.centerX, spriteY, 10, 3); anim.animations.add('playAnim', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], true); anim.animations.play(playAnim', frameRate, true); game.load.onLoadStart.add(loadStart, this); game.load.onFileComplete.add(fileComplete, this); game.load.onLoadComplete.add(loadComplete, this); }, update: function () { loadingBar.inflate(1, 0); console.log(game.load.progress); }, render: function () { game.debug.geom(loadingBar, '#FFFFFF'); } function loadStart() { console.log('Loading'); } function fileComplete(progress, cacheKey, success, totalLoaded, totalFiles) { console.log("File Complete: " + progress + "% - " + totalLoaded + " out of " + totalFiles); loaded = true; } function loadComplete() { if (loaded) { changeState("Level 1"); loaded = false; } }