Search the Community
Showing results for tags 'tablet'.
Found 16 results
-
I am looking for someone that can build / brand an HTML 5 game that can be used on our website during Christmas. We may build several games.
-
Hey guys, I want to navigate the camera with the touch features from smartphone/tablet. Neither ArcRotate,Free or Touch-Camera works. Is Hand.js necessary? <!doctype html> <html> <head> <meta charset="utf-8"> <title>Babylon - Basic scene</title> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> <script type="text/javascript" src="http://cdn.babylonjs.com/2-3/babylon.js"></script> <script type="text/javascript" src="./hand.js"></script> </head> <body> <canvas id="renderCanvas"></canvas> <script type="text/javascript"> // Get the canvas element from our HTML below var canvas = document.querySelector("#renderCanvas"); // Load the BABYLON 3D engine var engine = new BABYLON.Engine(canvas, true); // ------------------------------------------------------------- // Here begins a function that we will 'call' just after it's built var createScene = function () { // Now create a basic Babylon Scene object var scene = new BABYLON.Scene(engine); // Change the scene background color to green. scene.clearColor = new BABYLON.Color3(0, 1, 0); // This creates and positions a free camera var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); // This targets the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // This attaches the camera to the canvas camera.attachControl(canvas, false); // This creates a light, aiming 0,1,0 - to the sky. var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); // Dim the light a small amount light.intensity = .5; // Let's try our built-in 'sphere' shape. Params: name, subdivisions, size, scene var sphere = BABYLON.Mesh.CreateSphere("sphere1", 10, 1, scene); // Move the sphere upward 1/2 its height sphere.position.y = 1; // Let's try our built-in 'ground' shape. Params: name, width, depth, subdivisions, scene var ground = BABYLON.Mesh.CreateGround("ground1", 3, 3, 2, scene); // Leave this function return scene; }; // End of createScene function // ------------------------------------------------------------- // Now, call the createScene function that you just finished creating var scene = createScene(); // Register a render loop to repeatedly render the scene engine.runRenderLoop(function () { scene.render(); }); // Watch for browser/canvas resize events window.addEventListener("resize", function () { engine.resize(); }); </script> </body> </html>
-
Hey guys! Today I'm super excited to announce the live release of our first Phaser game, ROBO! You can get it for free on the Apple and Play stores! Link to the game in the Play store : https://play.google.com/store/apps/details?id=com.robo Link to the game in the App store : https://itunes.apple.com/us/app/funtardz-robo/id1133435793?mt=8 Also we wouldn't mind if you gave us some likes / follows ^^ Facebook : https://www.facebook.com/ROBO-1372016872814241/?ref=settings Twitter : https://twitter.com/roboteamoffici1 It's been really challenging building this game from the ground up, all the more as it was our first time being on our own. The game was built with Phaser 2.4.6, and exported to the mobile platform with Cordova. I'd also like to use this post to thank all the loyal members of the forum who have greatly helped us over the last past months! You guys make this place rock! If you have any questions, whether it's about the gameplay or the code, don't hesitate! I'd be glad to answer them! Have a nice day guys, and have fun coding the awesome with Phaser!
-
Hi everyone, we're new to the forum so first of all I think it's a good idea to introduce KaiserGames a little bit and show you guys what we're doing. We're located in Cologne, Germany and it all started with creating our own flash games portals around 2005/2006. Our first portals have been KralOyun.com and SpielAffe.de. Both became the market leader in their respective countries (Turkey and Germany) rather quickly and maintain this position until today. We run a couple of other games portals in different languages, but these two are mainly the pillars of KaiserGames' success. Since late 2013 we started focussing on HTML5 games and launched the respective spin-offs of the aforementioned portals for mobile devices, namely m.spielaffe.de and m.kraloyun.com. They have been growing nicely since January 2014 and each of them already counts more than 2 Million visits every month. We have been following the contents of this forum for quite a while now and thought that now may be a good time to participate and become a part of this community. We're open for interesting discussions and everything else regarding HTML5 games Of course we are mainly interested in meeting cool and capable people here. It's all about the games, so we really hope to make some great connections, especially to developers who are interested in sharing their games with a wide audience, selling licenses and stuff like that. From what we've seen so far, we have definitely come to the right place Looking forward to joining some valuable and worthwhile conversations. If you have any questions, please ask us anytime! Best regards from Germany, Lars / KaiserGames PS: We are developing games in-house as well. If you have the time, maybe take a look at m.spielaffe.de and search for Smarty Bubbles and Kiba & Kumba: High Jump. -
Hi, I'm developing a small HTML5 game for mobile and tablet. I am not a very seasoned coder. so I hope somebody can help me out here. I want to make the game fit the screens of different mobile and tablet platforms. How do I do that the best? Here is a link to an early prototype of the game, without any attempt for it to be responsive http://christianlaumark.dk/codeShop/shopProto1_5.html. Thanks in advance!
-
I can post some code if needed but, when testing my game on a Nexus 7 tablet whenever I press a button it stays in the down state, never returning to the out state. This situation doesn't occur on my Xperia V phone or on Google Chrome.
-
Hi there, i'm facing a weird problem. I'm using a sprite to display an image (1280px * 80px). The available are to show the image is shorter than image. At this point, i compute ratio between image size and area size to get the initial scale factor for sprite. When i run the game on my computer with Chrome, in "tablet mode" with a screen size of 1024*575px (same size as my samsung tablet), the image is fully displayed. I'm happy (Droopy style) When i run the game on my tablet (Samsung galaxy Tab 3 7.0), the image is a bit bigger and is not fully displayed. I log all values (elements sizes, image/area ratio) and values are identical. I don't understand why image is rendered differently with same scale value. What did i miss? Can you help me, it's driving me crazy. Thx. Gauthier.
-
So I'd like to test my Phaser app on a tablet. Given that I have been testing it on a web browser, I assume device resolution is going to be something to take into account. Can you please let me know what is the fastest way to test my app on a tablet? What should I take into account when I am coding for multiplatforms? Anyone here used Ionic framework? It comes with Cordova and usually the latter converts the HTML5 app to a non-native smartphone/tablet app and handles the responsiveness. So I don't have to worry about device resolutions and whatnot. Is there anything similar for Phaser or I have to do it from scratch?
-
Hello All, This is my latest game called "Mind the Gap". The player needs to throw the disk and reach the end of the game area while avoiding the moving blocks. Here are some screens: And the live game: http://netgfx.com/trunk/games/mindthegap/ I hope you like it. Let me know what you think!
-
Hello folks! I'm developing a project which consists of a canvas and a set of menus and navigation tools to navigate into the scene. The project must be available both on desktop and tablet devices (not mobile phone). I have no problem with the desktop version of the project, but the tablet version causes some weird bugs I couldn't fix for now. I test the mobile rendering of the website on Google Chrome Developer Tools with device mode activated (Google Chrome version: 41.0.2272.101). The problem is that, on viewport resizing, the canvas won't resize properly when the width of the viewport gets below 980 px. As my DOM body has a CSS width set at 100%, its min-width follows the highest width among its element. Every element of my body have a CSS width of 100% (including the render canvas). But the width CSS property of the canvas can't get below 980 px (at pixel ration: 1; 1960 px at pixel ration: 2; etc...). And so, the body CSS width get stuck at 980 px too... Also, as the width of the viewport gets lower than 980 px, the height property of the canvas gets higher. I tried a first workaround in the JS code, like this: // engine: the engine used in the canvas// canvas: the DOM canvas element$(window).on("resize", function(){ var width = window.devicePixelRatio * window.innerWidth; var height = window.devicePixelRatio * window.innerHeight; engine.setSize(width, height); engine.resize(); canvas.width = width; canvas.height = height;});The result is that, even if the canvas in the HTML code gets the corrects width & height, the scene doesn't get the correct size! It looks like the scene is still stuck at 980px wide, and the height continues to rise. I tried a second workaround in the render loop, still in the JS code, like this: _this.engine.runRenderLoop(function(){ _this._scene.render(); var width = window.devicePixelRatio * window.innerWidth; var height = window.devicePixelRatio * window.innerHeight; _this._scene.width = width; _this._scene.height = height;});The result is... still the same situation. Can't set a viewport width below 980 px without getting this problematic situation, and the body doesn't fit into the viewport (you have to horizontally/vertically scroll to see the rest of the DOM body). You can easily reproduce this bug with any BJS playground code, with Google Chrome and device mode activated. Try to reduce the width of the viewport below 980 px and see what happens ;-) if you have any effective solution I'll be glad to see it! :-) -
Hello everyone! Just joined the nice community here, and wanted to show off my JS13k game to anyone interested! http://js13kgames.com/entries/compact-conflict It's a Risk-like strategy game with simple rules and hard to master gameplay. Single- and multi-player, works on most modern browsers and tablets I could get my hands on. Any feedback appreciated! Obligatory screenshot: If you're interested, I also wrote an in-depth blog post about the AI implementation for the game, which turned out to be a challenging thing to do inside a few weeks of development: http://wasyl.eu/game-design/2014/09/18/competent-ais-in-a-few-bytes.html
-
TouchTheBeat is a game for tablets and other touch-enabled devices currently in development. Alpha 1 was just finished and can be playtested here: Play Alpha 1 TouchTheBeat is level-based. Each level consists of a song from SoundCloud and a composition of gameobjects. The more rhythmically accurate you interact with the gameobjects, the higher your score will be in the end. The game comes with the ability to create and share your own levels. You can find more information on TouchTheBeat in my blog post here: http://coloreddrums.de/touchthebeat-alpha-1/ Due to the fact that this is Alpha 1, the graphics are obviously kept very simple at the moment. This is my first game and I would love to get some feedback from you! Especially I would like to know how you experience the difficulty of the included demo-levels.
-
I have been trying to make my game responsive. One major issue is that when you doubletap on tablet it adjusts the screen size. I used this fix: <meta name="viewport" content="initial-scale=.7, user-scalable=no"> And it resizes it fine for tablet and desktop, but not for mobile. Is there a way to code a double-tap event listener that will eliminate the resizing feature instead?? btw, my game: http://5ermash.com/creditevaders3.html Thanks!
-
* update 18/11: fixed audio bug in newer versions of Chrome that would break the game * Hey all, A couple of years ago, we (Pure Communication) made the Kaatje website: a Flash website for little kids that is linked to a live-action TV show. Now we just finished the tablet friendly HTML version, using Pixi.js! You can check it out here: Kaatje - Click here to play Here are some screenshots: [ Homescreen, with links to 4 games on top. More games will be added in the near future! ] [ Shoot those balloons, but don't shoot Eendje (Ducky)! ] [ Kaatje at the farm. Click around to discover! ] [ Reach the finish before time runs out! Avoid obstacles by clicking the red arrows, or by swiping left or right. ] [ Get those stubborn sheep in their pen! ] Our biggest problem was getting sound to work OK on most devices. In the end we used a mix of Web Audio API calls and a fallback using SoundManager 2. We'd like to thank the guys at Goodboy for their awesome Pixi.js framework and their support on Github!
-
Hi everybody, I'm looking for feedback for my new game called "Flipping Jellies" About the game : Flipping Jellies is an puzzle game, which will stress your brain a bit. Objective of the game is to order jellies to desired form by swiping them. Game have two different resolutions (320x480 and 640x960), thus is playable on the wide range of mobile devices and of course on desktops too. Tech info : - as the rendering engine was used fantastic pixi.js library, thank you - http://www.pixijs.com/ - thanks to pixi, game is capable to run in WebGL mode when available, with canvas fallback - as tweening library I used https://github.com/sole/tween.js/ - also big thanks, guys PLAY THE GAME NOW Thank you, -bubamara
-
Hi all, I'm currently building a reusable framework in GameMaker Studio that deals with scaling and orientation on mobile and tablet devices, that I can build all of my future html5 games on. All of my games will be made at either 320x480 or 480x320, and I plan to offer them to sponsors and portals. When dealing with devices with a screen resolution of 320x480, such as iPhones, displaying the game at 1:1 ratio will mean that a portion of the game at the bottom will not be visible under the browser bar, and so would be filled with a logo or filler graphics perhaps. The issue is that because GameMaker studio makes it so easy to export to other formats I also plan to release the same games as iOS and Android native apps. Designing this way would mean that I have to design two versions of the game; a native version taking up the entire screen and an html5 version that fits within the iOS bars. (I've hidden the top browser bar but you can't remove the bottom browser bar or top iOS bar). The scaling solution I've come up with takes the entire 320x480 canvas and scales it up or down to fill whatever space it can, whilst still respecting aspect ratio. However on iPhone this leaves scrollable spaces at either side, as shown below: This solution is the easiest for me as I only need to design each game to fit 320x480 and then scale it up or down to suit, but would sponsors (booster media for example) be happy with this or could it hinder my chances? Thanks in advance. Edit: I wasn't sure whether to put this in the coding or sponsor section so feel free to move it if necessary!
