TheCrock

Members
  • Content Count

    11
  • Joined

  • Last visited

About TheCrock

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I have this slice of code which works but is throwing an error in the console. Uncaught type error. Cannot read property of x at undefined. I am using the game loop to move a sprite on its x and y axis. The code works but i get an error and I would be interested to know why. Also when i try to introduce, let state = play; so i can change the call that requests the play(); function to state(); my code stops working. I would like to be able to change the value of state so i can change which function I call by changing the value of state variable. Does any wise member know where i am going wrong? gameLoop(); function gameLoop() { requestAnimationFrame(gameLoop); //Update the current game state: play(); //Render the stage renderer.render(stage); } function play() { explorer.x += explorer.vx; explorer.y += explorer.vy; } Thanks guys.
  2. //<script src="pixi/spriteFromTextureAtlas.js"></script> I have this in my html file. Somehow these // were added at the start. I think i tried to comment out html like javascript, silly me. now when I remove them the console throws this error. spriteFromTextureAtlas.js:15 Uncaught TypeError: Cannot read property 'appendChild' of null. When i put the // back the script loads fine. Im wondering what is causing this behaviour. Thanks in advance Keith
  3. Thank you Ivan for all of your help and interest. I don't care about writing my own engine, I just need to start producing something. I want to mainly create a 2d platform game to begin with. I already know how to do all of this in plain javascript but I want to be able to put some more professional touches to the work and using a game engine or libraries seems to be the way to get things done quickly.Like animating a walk cycle. I have a simple collision library called bump by kittycat attack.He is also the author of the pixi.js.book I am studying. It is for use with pixi. It is more or less the same code I was using before. I spent a couple of hours in pixi.js and already have sprites on the screen using a texture packer and json files to tell pixie what the sprites are. So i know pixi.js can get things done fast. I will carry on and see what I can get done. I was thinking though that as I am not writing my own engine that perhaps Phaser would be even quicker. It has level editor now. Your examples are very nice, you must be quite an experienced programmer. I want to start doing now. I have learned a lot from building array based games. So I know my work is not wasted. its a little disappointing that a lot of the logic i learned is not going to be very useful for pixi.js games though. Thank you for your help Ivan.
  4. Ok thank you very much. So i will use pixi.js to build my sprites without 2d.arrays. . I will do it with texture atlas and json file. I already know how to do this. What about collision detection? If I have monsters pushed into an array can I use a for loop to check for collision with a player character like this maybe: for(var i = 0; i < hedgehogs.length; i++) { var hedgehog = hedgehogs; if(hedgehog.visible && hitTestCircle(cat, hedgehog) && hedgehog.state === hedgehog.NORMAL) { if(cat.vy > 0) { blockCircle(cat, hedgehog, true); hedgehogsSquashed++; squashHedgehog(hedgehog); } else { gameState = OVER; } } } I know the syntax would be slightly different but is this type of thing ok using pixie.js? I am very gratefull for your help Ivan
  5. Hi and thank you for your reply. I don't understand what you mean here . I apologise I don't mean to sound rude. Do you mean I cannot take a beginner book and apply the tile based approach to pixi.js? Do you think I should build my game using different methods? I spent a lot of time learning how to create platforms and mazes from 2d arrays.All of the logic I learned relies on moving around the columns and rows of the 2d array. It is used for pathfinding, enemy ai, everything. Have I wasted my time? I need to move and get something made now. Is using 2d arrays and canvas not a good way to build a platform game? My render function would look like this //Display the sprites if(sprites.length !== 0) { for(var i = 0; i < sprites.length; i++) { var sprite = sprites; if(sprite.visible) { drawingSurface.drawImage ( image, sprite.sourceX, sprite.sourceY, sprite.sourceWidth, sprite.sourceHeight, Math.floor(sprite.x), Math.floor(sprite.y), sprite.width, sprite.height ); } } All of my sprites are held in an array for rendering .. I can also check for collisions by looping through the array an comparing positrons of other objects. . Is this going to be hard to convert to pixi? Thank you for your interest.
  6. I am a real newbie. I just finished the excellent book Foundation Game Design with HTML5 and Javascript by Rex Van Der Spuy. The book has taught me a lot about making game maps from 2d arrays, collision detection, enemy AI for platform and maze games based on arrays.All of the AI is based on positions generated from 2d arrays. I can keep track of everything by the positions of sprites in rows and columns of a 2d array.This makes enemy AI easy. I have a scripts for collisions for rectangles, circles, boxes, that give me collision sides and objects can bounce from them. Also to act as platforms and so on. I would render the game by looping through an array and converting positions in the array to x and y coordinates on the screen.This is all using the html5 Canvas. I started his follow up book Learn Pixi.js and I am not sure if it is the right direction for me. My question is can I use all of this stuff I have learned and combine it with the Pixijs? To me it seems like I have spent a lot of time learning tile based games just to go in a completely different and in my opinion less satisfactory direction.The game that I would make by the end of the Pixi.js book would be simpler than the one i already made.It just looks nicer. It uses a single image for the background and uses arrays only to get the images from the texture atlas. All i really want is to add 'the juice' from pixi.js. Like animated walking characters and some particle effects. Can any of you guys give me some advice. Thanks in advance Keith
  7. I am very confused and I hope below makes sense. The first time I ran these two functions - the first called globalScope, returned 'window'in the console and the second called localScope, returned 'undefined' in the conole. let globalScope = () => console.log(this); globalScope(); let localScope = function(){ console.log(this); }; localScope(); I played a little with the second function and created a var called scope. var scope = this; then used console.log(scope); and it returned 'window'. Nice, So i cleared all of this and tried the two functions again and now they both return 'window' in the console. Am i mistaken? Did i reset something in Chrome? Shouldn't localScope return undefined again now. I am working from a book it says: ■■Note If you’re using ES5, you’ll need to force a function expression to use local scope by adding "use strict" as the function’s first line. So here is my REAL NEWBIE question. How do I know if I am using ES5 or ES6? Was the first time i ran the code using ES6 to get 'undefined' from localScope function - and now I am using ES5 and need to "use strict" I hope that makes sense because I am very confused. The book says that the localScope function would return 'undefined' in the console log and it did. But now it is returning 'window' in the console log. Thanks in advance Keith.
  8. Hi again b10b. I just when back to the page, opened dev tools and sure enough it is showing there for me now. Thanks for the reply.
  9. Hi everone, another newbie HTML5 and Javascript question. I was checking the source code in chrome for this walking character: http://atomicrobotdesign.com/blog_media/sprite_movement/index.html Looking at the index.html file i see it calls a script called movement.js and a script called requestAnimationFrame.js. I can only find the movement.js script in the navigator window not the requestAnimationFrame.js script. Can any wise member tell me what I am missing here?
  10. Now I understand b10b Thank you for the reply and explanation with link.Most kind. Very early in the book there was indeed a paragraph on scope which I had forgotten. I ran a search for scope through the pdf and found it. Thanks again.
  11. I am following the excellent book Foundation Game Design with HTML5 and Javascript. I have a piece of code, which works but i'm not sure why. function destroyAlien(alien) { //Change the alien's state and update the object alien.state = alien.EXPLODED; alien.update(); //Remove the alien after 1 second setTimeout(removeAlien, 1000); function removeAlien() { removeObject(alien, aliens); removeObject(alien, sprites); } As you can see it is a function which uses setTimout to call another function. It only calls removeAlien function when it is inside the main function. If I move callAlien function out of the main function it does not work. I am puzzled as to why this is. Can any sage member here tell me why this is? Thanks in advance Crock TheCrock Posts: 2 Joined: 12 Nov 2020, 16:02