HOW TO MAKE 2D GAMES IN MOBILE
Hello guys, Are you mobile users and you interested in making in games and wanted more tips to become good at game creation? you are welcomed to right place to get tips of game development along with web development.
I here to make you->>Easier and familiar towards to game development through web development.
>>I assured that this article will make you motivate and gives a full range of instructions in game dev before get in to it.
>>Through this article, I will share my experience and Tips that you need to follow to become a master in game development with any programming languages.
>> After this article, you got motivation to create 2d games like this my own creations.
AQUA SAVE:
and many more games.....
Creating something is awesome and everyone wanted to do a creation, but to start that work we don't know how to do it. As this article is basically for beginners in game dev and programming. I hope that others will also get good info and techniques.
At the beginning, I also find very difficult to create a game and I am very new to programming. But after some struggle , I find an app called as SOLOLEARN to learn programming language initially. This app make me familiar to programming languages.
In my mind, I want to develop a game. For this I selected JAVASCRIPT programming language along with HTML5 & CSS and learn those basically.
STEP-1: MAKE YOURSELF FAMILIAR TO HTML5, CSS3 & JAVASCRIPT.
Using JS gives you advantages of
→As javascript is an Object programming language which will simplifies the use of other languages like c++, java , c# and python in game development.
So, if we are ease with JS first, then that makes you familiar to other languages as well in game dev. As that all that other languages like python are simple but the installing packages and libraries may not occur in our android phone. learning game dev in android phone through JS is preferred.
STEP-2: INSTALL AN BEST IDE APP IN OUR MOBILE TO CREATE A GAME
DOWNLOAD ICODE -GO APP HERE
STEP-3: BASICS OF GAME DEV METHODS IN JSIn HTML , we have tag to start a game and its also has & tags which you needed to perfect in these to start a game. To give controlling to our game , we needed to know about the tag.In javascript, perfectly we should know
Mainly there are 3 selecting methods
1. document.getElementById(element)
2. document.getElementsByClassName(element)
3.document.getElementsByTagName(element)
Then you should know about the getContext('2d') which gives a good contexts to gives your game creating.
To get working with canvas , we needed these methods...
var canvas = canvas.getElementById("canvasId");
var ctx = canvas.getContext ('2d');
/ / To draw text on canvas like SCORES:
ctx.strokeText = "black";
ctx.fillStyle = "red"; // For text color...
ctx.font = "bold 18px italic"; //for font size
ctx.fillText( "TEXT TO ON CANVAS" , X , Y ); //For text and its position...
//To draw images on canvas
var image = new image ();
image.src = "url of image";
ctx.drawImage ( image , positonX, postionY , width , height );
// To draw rectangle
ctx.fillStyle = "colorName";
ctx.fillRect(positonX, postionY , width , height ); // for rectangle
// To clear Canvas
ctx.clearRect (0 , 0 , canvasWidth , canvasHeight);
we will mostly place this at starting in setInterval function to get movement effect of Objects.
For interaction of game,
you should know about the EVENT HANDLINGS in JS. These enables you to give controlling to game.
Mainly we should know about the..
1. element.ontouchstart = functionName();
2. element.ontouchmove = functionName();
3. element.onclick = functionName();
4.addEventListener(event , functionName);
here, element will be mostly the tags in HTML.
To get repeat actions,
we should know about these..
1. setInterval(functionName , time (msec));
2. requestAnimationFrame( functionName);
To stop repeating action, we needed clearInterval( variable of setInterval).
> First learn HTML, CSS & JS.
> Know basic of canvas methods in JS.
> Made a game idea to start creation.
> download IDEs for HTML , CSS & JS.
> Then involve in your great creations.
Through web development, we can become good game developer and with this process you are familiar to other programming languages in game dev like pygame , java , c++ , and unity with c#.
AQUA SAVE:
and many more games.....
Creating something is awesome and everyone wanted to do a creation, but to start that work we don't know how to do it. As this article is basically for beginners in game dev and programming. I hope that others will also get good info and techniques.
At the beginning, I also find very difficult to create a game and I am very new to programming. But after some struggle , I find an app called as SOLOLEARN to learn programming language initially. This app make me familiar to programming languages.
In my mind, I want to develop a game. For this I selected JAVASCRIPT programming language along with HTML5 & CSS and learn those basically.
STEP-1: MAKE YOURSELF FAMILIAR TO HTML5, CSS3 & JAVASCRIPT.
As an android mobile user, l prefer you to use the javascript to begin a game development. Since to make a simple game, this JS is very helpful and it works with HTML & CSS which very simple to learn and use. With the other programming languages also we create a game but we need to install libraries and framework of that languages into our android mobile which mostly not possible to us.
Using JS gives you advantages of
→As javascript is an Object programming language which will simplifies the use of other languages like c++, java , c# and python in game development.
→URLs of libraries in JS makes you to use without any installation.
→With the use of HTML,CSS & JS, you will get big experience of web development.
→HTML and CSS gives you web page as a Game screen ie. (canvas).
So, if we are ease with JS first, then that makes you familiar to other languages as well in game dev. As that all that other languages like python are simple but the installing packages and libraries may not occur in our android phone. learning game dev in android phone through JS is preferred.
If you are good at JS along with HTML and CSS then that's okay, if not , you can download SOLOLEARN app to learn HTML, CSS & JS. download option is given below.
DOWNLOAD SOLOLEARN APP HERE https://play.google.com/store/apps/details?id=com.sololearn
STEP-2: INSTALL AN BEST IDE APP IN OUR MOBILE TO CREATE A GAME
Although sololearn has its own IDE (code playground), I installed other IDEs into my mobile to make me easy in coding .
so I preferred all android mobile users to install IDEs like ..ANACODE and IGO apps which makes work more with full of tools and those gives suggestions while coding.
For simple games, sololearn is the best but create a bit big games you need separate iDEs.
To download best IDEs for HTML game, the links of those app is given below.
so I preferred all android mobile users to install IDEs like ..ANACODE and IGO apps which makes work more with full of tools and those gives suggestions while coding.
For simple games, sololearn is the best but create a bit big games you need separate iDEs.
To download best IDEs for HTML game, the links of those app is given below.
DOWNLOAD ANACODE APP HERE
DOWNLOAD ICODE -GO APP HERE
STEP-3: BASICS OF GAME DEV METHODS IN JSIn HTML , we have tag to start a game and its also has & tags which you needed to perfect in these to start a game. To give controlling to our game , we needed to know about the tag.In javascript, perfectly we should know
about DOM (Document Object Model) concept and about SELECTORS which enables you to select the HTML elements through JS.
Mainly there are 3 selecting methods
1. document.getElementById(element)
2. document.getElementsByClassName(element)
3.document.getElementsByTagName(element)
Then you should know about the getContext('2d') which gives a good contexts to gives your game creating.
To get working with canvas , we needed these methods...
var canvas = canvas.getElementById("canvasId");
var ctx = canvas.getContext ('2d');
/ / To draw text on canvas like SCORES:
ctx.strokeText = "black";
ctx.fillStyle = "red"; // For text color...
ctx.font = "bold 18px italic"; //for font size
ctx.fillText( "TEXT TO ON CANVAS" , X , Y ); //For text and its position...
//To draw images on canvas
var image = new image ();
image.src = "url of image";
ctx.drawImage ( image , positonX, postionY , width , height );
// To draw rectangle
ctx.fillStyle = "colorName";
ctx.fillRect(positonX, postionY , width , height ); // for rectangle
// To clear Canvas
ctx.clearRect (0 , 0 , canvasWidth , canvasHeight);
we will mostly place this at starting in setInterval function to get movement effect of Objects.
For interaction of game,
you should know about the EVENT HANDLINGS in JS. These enables you to give controlling to game.
Mainly we should know about the..
1. element.ontouchstart = functionName();
2. element.ontouchmove = functionName();
3. element.onclick = functionName();
4.addEventListener(event , functionName);
here, element will be mostly the tags in HTML.
To get repeat actions,
we should know about these..
1. setInterval(functionName , time (msec));
2. requestAnimationFrame( functionName);
To stop repeating action, we needed clearInterval( variable of setInterval).
SUMMARY:
> First learn HTML, CSS & JS.
> Know basic of canvas methods in JS.
> Made a game idea to start creation.
> download IDEs for HTML , CSS & JS.
> Then involve in your great creations.
Through web development, we can become good game developer and with this process you are familiar to other programming languages in game dev like pygame , java , c++ , and unity with c#.
CONCLUSION :
Well, now it is the best time to create a game. The above steps are all you need to get full info about 2d html games.
In case, if you wish to add any new tip, feel free to let me know in the comment section below.
0 Comments