Mysidia Adoptables Support Forum  

Home Community Mys-Script Creative Off-Topic
Go Back   Mysidia Adoptables Support Forum > Creative Discussion > Programming and Game Development

Reply
 
Thread Tools Display Modes
  #1  
Old 06-25-2014, 04:59 PM
squiggler's Avatar
squiggler squiggler is offline
Squiggling since 1995
 
Join Date: Jul 2013
Posts: 185
Gender: Unknown/Other
Credits: 4,170
squiggler is on a distinguished road
Default Adapting a Game for Mys?

Hey. I found an open-source game called 2048. It's under the MIT license. (I'm pretty sure this means that any mods we make will be open source as well.)

I want to adapt the code to make it look like this game- with the pictures instead of numbers. (I can't use that site to make it because of their TOS.)
I've figured out that it probably would be edited in the style folder, but can anyone help me decode it?

Also, I would like to do one of two things: send score to get promocode to get money, or have you automatically earn funds as you're playing. There would need to be a cap on this, obviously.

Thank you in advance for any help you can provide!
__________________
Avatar courtesy of Doll Divine.
Reply With Quote
  #2  
Old 06-28-2014, 03:58 PM
squiggler's Avatar
squiggler squiggler is offline
Squiggling since 1995
 
Join Date: Jul 2013
Posts: 185
Gender: Unknown/Other
Credits: 4,170
squiggler is on a distinguished road
Default

Okay, so I think the file I want is main.css in the style folder. I found this section:
HTML Code:
.tile {
  position: absolute;
  -webkit-transition: 100ms ease-in-out;
  -moz-transition: 100ms ease-in-out;
  transition: 100ms ease-in-out;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform; }
  .tile .tile-inner {
    border-radius: 3px;
    background: #eee4da;
    text-align: center;
    font-weight: bold;
    z-index: 10;
    font-size: 55px; }
  .tile.tile-2 .tile-inner {
    background: #eee4da;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
  .tile.tile-4 .tile-inner {
    background: #ede0c8;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
  .tile.tile-8 .tile-inner {
    color: #f9f6f2;
    background: #f2b179; }
  .tile.tile-16 .tile-inner {
    color: #f9f6f2;
    background: #f59563; }
  .tile.tile-32 .tile-inner {
    color: #f9f6f2;
    background: #f67c5f; }
  .tile.tile-64 .tile-inner {
    color: #f9f6f2;
    background: #f65e3b; }
  .tile.tile-128 .tile-inner {
    color: #f9f6f2;
    background: #edcf72;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
    font-size: 45px; }
    @media screen and (max-width: 520px) {
      .tile.tile-128 .tile-inner {
        font-size: 25px; } }
  .tile.tile-256 .tile-inner {
    color: #f9f6f2;
    background: #edcc61;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
    font-size: 45px; }
    @media screen and (max-width: 520px) {
      .tile.tile-256 .tile-inner {
        font-size: 25px; } }
  .tile.tile-512 .tile-inner {
    color: #f9f6f2;
    background: #edc850;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
    font-size: 45px; }
    @media screen and (max-width: 520px) {
      .tile.tile-512 .tile-inner {
        font-size: 25px; } }
  .tile.tile-1024 .tile-inner {
    color: #f9f6f2;
    background: #edc53f;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
    font-size: 35px; }
    @media screen and (max-width: 520px) {
      .tile.tile-1024 .tile-inner {
        font-size: 15px; } }
  .tile.tile-2048 .tile-inner {
    color: #f9f6f2;
    background: #edc22e;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
    font-size: 35px; }
    @media screen and (max-width: 520px) {
      .tile.tile-2048 .tile-inner {
        font-size: 15px; } }
  .tile.tile-super .tile-inner {
    color: #f9f6f2;
    background: #3c3a32;
    font-size: 30px; }
    @media screen and (max-width: 520px) {
      .tile.tile-super .tile-inner {
        font-size: 10px; } }
Is this where I change it to images, and can someone please tell me how? Thank you!
__________________
Avatar courtesy of Doll Divine.
Reply With Quote
  #3  
Old 06-28-2014, 04:54 PM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 840
Gender: Unknown/Other
Credits: 35,650
Kyttias is on a distinguished road
Default

On Chrome, I opened up the game, right clicked a tile that had an image, and at the bottom of Chrome's right click menu there is a listing that says 'Inspect Element'. From there I just examined the css that modified the title. The tiles are probably dynamically given images via Javascript/jQuery, but the css looks like this when a tile has an image:

Code:
.tile-1 .tile-inner {
background-image: url(http://img2.wikia.nocookie.net/__cb20130710011141/flightrising/images/3/38/Egg_Nature.png) !important;
}
So, that would also be .tile-2 .tile-inner, .tile-3 .tile-inner, so on and so forth. Again, this is not done by editting a css file directly, but by Javascript telling it to apply a background image and remove it when you can't see a tile, etc. You'd have to see what they're doing in the Javascript.

You'd be better off finding a different free source version of 2048 that already has images. ( Also this??? I think this was used to build the FR version with images. )
__________________
Please do not contact me. I cannot offer tech support on any coding I've done prior to 2018.

Last edited by Kyttias; 06-28-2014 at 04:59 PM.
Reply With Quote
  #4  
Old 06-28-2014, 05:57 PM
squiggler's Avatar
squiggler squiggler is offline
Squiggling since 1995
 
Join Date: Jul 2013
Posts: 185
Gender: Unknown/Other
Credits: 4,170
squiggler is on a distinguished road
Default

Darn. So there's no way I can edit the CSS myself? I was sure it was possible...
__________________
Avatar courtesy of Doll Divine.
Reply With Quote
  #5  
Old 06-28-2014, 06:46 PM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 840
Gender: Unknown/Other
Credits: 35,650
Kyttias is on a distinguished road
Default

You'll have to find wherever in the source is pointing to the actual images and swap those links out for your own. I've yet to find where that is.
__________________
Please do not contact me. I cannot offer tech support on any coding I've done prior to 2018.
Reply With Quote
  #6  
Old 06-29-2014, 03:16 AM
Hall of Famer's Avatar
Hall of Famer Hall of Famer is online now
Administrator, Lead Coder
 
Join Date: Dec 2008
Location: Somerville
Posts: 4,388
Gender: Male
Credits: 126,215
Hall of Famer is on a distinguished road
Default

Theoretically you should be able to edit the css if you have full access to the source file. It may be hidden somewhere though, not every script has a css folder or theme folder that you can identify immediately.
__________________


Mysidia Adoptables, a free and ever-improving script for aspiring adoptables/pets site.
Reply With Quote
  #7  
Old 06-29-2014, 09:22 PM
squiggler's Avatar
squiggler squiggler is offline
Squiggling since 1995
 
Join Date: Jul 2013
Posts: 185
Gender: Unknown/Other
Credits: 4,170
squiggler is on a distinguished road
Default

Well, it's been fully shared on gitHub: https://github.com/gabrielecirulli/2048
It has a style folder with 3 css files in it. I think it was in that stretch of code from above?
__________________
Avatar courtesy of Doll Divine.
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
A real for Game Developers FounderSim Webmasters Area 2 10-25-2015 01:47 AM
game for points Nemesis Suggestions and Feature Requests 3 10-24-2013 12:29 AM
Pet Game Tutorial on VirtualPetList.com Kesstryl Tutorials and Tips 0 06-21-2013 11:03 PM
Game Play Overhaul Nemesis Suggestions and Feature Requests 11 06-07-2012 10:44 AM
Blackjack - GAME :D HIddenPanda Mys v1.1.x Mods 9 02-09-2011 08:50 AM


All times are GMT -5. The time now is 09:57 PM.

Currently Active Users: 209 (2 members and 207 guests)
Threads: 3,942, Posts: 31,405, Members: 15,530
Welcome to our newest members, ancrsbys01.
BER





What's New?

What's Hot?

What's Popular?


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2018, vBulletin Solutions Inc.
vBCommerce I v2.0.0 Gold ©2010, PixelFX Studios
vBCredits I v2.0.0 Gold ©2010, PixelFX Studios
Emoticons by darkmoon3636